Develop Reference

How do I stop FullCalendar.js from squishing vertically on mobile?

When viewing the dayGridMonth view on mobile, the squishing causes the calendar to enable a scrollbar for you to sift through.
I would like for the height to remain in full, and only the width to dynamically resize, so that you only need to scroll through the page and not the actual calendar itself (since you already do have to scroll some on the page, it's awkward). The header doesn't look too hot either but the focus right now is really on the calendar itself.
My CSS is weak to begin with, but playing with a library's styling is tenfold intimidating. Any tips in the right direction would be appreciated. Below is a sample of what the scrolling looks like (obligatory cursor because the bar fades otherwise)
Technically mobile would warrant switching to maybe week view or even day view, that solves it quick and easy, but the person i'm setting this up for really likes the full month view and wants it in all media formats to stay as is.
I located the element for the full container, but messing with height or width seems to do nothing and I can't see why.
Thanks for any help

There were two element containers manipulating the whole box content, I was editing the outer container, but the inner one needed to also be extended as it was the one where the table/rows were being populated.

horizontally fixed column is lagging on IE

Im trying to build comparison table from vertical lists.
Main goal is that first column must be fixed horizontaly only and horizontal scrollbar must be visible on screen all the time. I want to easy compare rows of first column with corresponding rows from other columns
like here jsfiddle example
I've managed to do this by using position absolute on 1st column and changing its css left property on scroll event.
$('#container').scroll(function() {
$('#main').css('left', $(this).scrollLeft());
});
That solution works fine except IE. On IE my fixed column is lagging and changing position is not smooth. I'm trying to fix it but i've run out of ideas for solution.

A part of the problem might derive from the fact that attaching anything to the scroll event can be quite heavy, just attaching a console.log() to it can be enough to understand the amount of calls.
You should give a try the solutions proposed in this thread, which will surely make it lighter on other browsers apart from IE as well.
I know you're searching for smoothness, you could animate the left property instead of changing it instantly, or finding a way to only do the smooth transition on IE, keeping it as is in the other browsers.
One other thing you could try would be will-change, but sadly it's not supported by IE. You could try giving transform:translate3D(0,0,0) to #main to trick the browser into using hardware acceleration, which might raise the performance on IE11.
--EDIT
Another thing that came to mind:
I can see you need to have the div absolutely positioned and not fixed since you need to scroll down while keeping it aligned with the other tables. Couldn't you use JS to give it position:fixed while scrolling horizontally and go back to absolute when the user scrolls vertically or stops scrolling horizontally?

Scrolling jumps when clicking jqGrid cell

I have a jqGrid setup that is rather wide, so it the horizontal scrollbar is visible.
Problem is, when scrolling to the right and clicking on a cell, the scrollbar jumps all the way back to the left.
Any ideas why this is happening and how I can prevent it?

I have the same issue with jqGrid4.1.2
After tried so many ways, I found the solution
After making the grid, please do the following things:
Call GridNav function of jqGrid
jQuery('#id').jqGrid('GridNav');
Then add postion of gridId_kn element's parent attribute : position:fixed
set if position is not added already
jQuery('#id_kn').parent().attr("style", style+"position:fixed");

Smooth scroll div horizontally by a pixel amount, no scrollbars

I've got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.
I'd like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.
I'd like the width of the container to appear as 100% of the window, and I'd also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that'd be great but it's not a must have.
Here's what I've got:
http://jsfiddle.net/696je/
I'm just looking for a function and the way to activate the function for left/right buttons.
I've tried Google for hours, I've tried Flesler's ScrollTo but I haven't had any luck, it might be something do to with the way I've got the width set up, anyway, thanks for your help.

It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)
here is a jsFiddle implementation with minimum possible wrappers.

I was a little confused by your code you posted in the jsFiddle. You said you wanted no horizontal scroll bars, yet your stuff was set up that way. I went with the horizontal scroll bar since that is what you were going with in your code.
I made a working function here jsFiddle. To get it to work in the frame you need to put focus in the "Result" window (just click anywhere), then use your left and right arrows.
I must give the javascript for keypress credit from this post

When textbox is resized in IE, block position behavior is messed up

i am using the autoresize plugin which increases the height as users type in stuff. It works great on FF/Chrome, but the behavior is messed up on IE (see screenshots below).
Essentially, the textbox, when resized, does not push the rest of the buttons down, which is weird, given that nothing on the page is absolute positioned.

I suspect the button and span on the right are in a relatively positioned container? I've encountered the same problem recently with positioned elements and expanding/collapsing siblings. Still searching for a proper solution, but removing the positioning can be a temp fix.