Events are not properly positioned / sized when height is fixed

[dennis-koster]

Hi,

When I have a fullCalendar instance with a fixed height and events loaded through the events option, the events aren't positioned / sized properly.

Whenever I trigger a window resize, or add / edit an event, all events are repositioned / resized to what they should look like. I have created a js bin here: http://jsbin.com/sihabusagu/edit?html,css,js,output.

Cheers

[nickyoung87]

We just ran into a problem with the height option as well.

When we set the option to height: 'auto' the scroll bars will still show up. The same thing happens if we set a pixel value. If we set something like height: 2000 it will stretch the calendar out but there will still be a scroll bar.

The auto problem only happens on the month view. It appears to work correctly still for agendaWeek and agendaDay.

I have moved back to 2.6.1 and this is not an issue there. Tested in 2.7.0 and 2.7.1 and it is broken in both of those releases.

Not sure if this is completely related to @denniskoster's issue but it seems to be similar enough to post here.

[arshaw]

could you post a screenshot of what things look like in the badly-positioned state? could have to do w/ screen/browser size. things look fine on my end

[dennis-koster]

Hi Arshaw,

Thanks for the reply. I have attached twee screenshots. One with the events incorrectly positioned / sized and one after window resize, where everything is fine.

Thanks in advance!

Dennis

[caseyjhol]

I can confirm that I'm getting the same results as @denniskoster (incorrectly positioned events) in both Chrome 50 and Firefox 46 on Windows 10. Removing

.fc-time-grid .fc-slats {
  position: absolute;
  bottom: 0;
  top: 0;
}

from the custom CSS appears to fix the problem.

[dennis-koster]

@caseyjhol Thanks for the reply. You are correct, when removing that css events are positioned properly along the grid. However, there's not much point in making the calendar higher if the grid stays that height.

[nickyoung87]

Is what I pointed here unrelated to this issue? It seemed like it was at first but now I am getting the impression that maybe it isn't. Let me know if the PR helps with anything here, otherwise I can open a separate issue for what we experienced.

[dennis-koster]

@nickyoung87 I can't really tell if the two issues are related to be honest. Could you post a jsbin?

[nickyoung87]

@denniskoster Ok so I was writing up a JSBin of the problem and I couldn't actually reproduce it at first. I am working in a WordPress environment so I copied the theme CSS to see if that had an effect, and it ended up being the issue.

I still think that there was some CSS removed in the 2.7.x versions of FC though that was helping with this. I narrowed down the issue to a line like this:

table { margin: 0 0 1.6em; }

Now, being in WordPress, I did test this on several different themes, but the above piece of code is very common across all of these and created the issue in all of my tests. Since we are writing a plugin I can override this with our CSS, but after trying that out it makes the height for all the different height options remain the same in the grid view. (Sorry I was incorrect about that part)

I am going to look at the recent changes in FC to see what else could have been removed that is causing this. Or maybe you have a guess @arshaw ?

[arshaw]

an even more minimal version of @denniskoster's recreation:
http://jsbin.com/gecosexiqu/edit?css,output

this shortcoming will be solved when "evenly-expanding slots" is a feature that's officially supported (as opposed to CSS hacks):
#265
↑
Please visit the link, give a 👍 to vote (?), press the 🔈Subscribe button to receive updates.