fullcalendar height not considering surrounding container - html

I have a vue.js project which I am integrating vue-fullcalendar into and I am running into an issue where the .fc-scroller fc-time-grid-container height is set beyond the height of the surrounding container.
I borrowed a codepen example from fullcalendar.io to recreate the situation. I structured the App.vue file as close as I could get it to my actual application: https://codesandbox.io/s/p3418kmo7
When you click "open in a new window" it appears that the height of the scrollable area is being set to a value which isnt considering the fact that its not the only thing on the page. I have tried setting the fullcalendar.io properties height and contentHeight without any changes to the overall behavior. When you force the height property <div class="fc-scroller fc-time-grid-container" style="overflow-x: hidden; overflow-y: scroll; height: 879px;"> in Chrome's html editor to a value smaller then the main container (in my case 500px works) the scrollable area shrinks and fits inside the main container removing the additional scrollbar.
I am not really sure what to do here, how can you control the computed height of the scrollable area so that your main container isnt overflowing off the page?

So after some debugging I was able to figure out that the properties contentHeight & height are not respected with passing them into a view specific configuration as I had above. Adding them to the global configuration & setting them to 'auto' worked out in my case but it would be nice to be able to handle each view independently.
Also wrapping the <full-calendar> template with a <div style='overflow-y: auto; max-height: calc(100vh-150px);">... was enough to solve my problem. It would be nice if the default aspectRatio calculation took into consideration things like the navbar height.
Here is the demo: https://codesandbox.io/s/mjz32jnoop

Related

Cap element size to grid area when using align-item: start

I have a CSS grid with a scrollable element placed in one of the grid's areas.
What'd I'd like is for the item to shrink if the content is too small to fit the area. I did this by setting align-self to start.
This works great, until the content grows. The element resizes past the end of the grid area it's assigned to.
How can I use align-start but still cap the height to the height of the grid area? I would have expected this to be the default behavior.
One solution is to have the element stretch but then have a child element inside it that contains the actual content. The parent would have overflow: auto and the child would simply grow until it's too large for the container. Unfortunately, this kills the box-shadow.
I could put the box-shadow on the outer element in this case, but then it'll be too large when the content is small.
Any ideas what I can do here? I considered using some Javascript shinnanigans but I'm not even sure how I'd grab the height of the grid area from JS.
JSFiddle: https://jsfiddle.net/1kLenm5a/2/
Apparently max-height: 100% works. I could have sworn I tried that but I was messing with so many other settings at the same time I must have missed it.
Thanks.

Flexbox not allowing scrollable area after collapsing other part

I'm working on a HMI using AngularJS(1.7.8) and Bootstrap in which there is four main panels : the navbar, a small up-left, a big bottom left and a big right one.
The expectation are that the small up-left one can collapse to become smaller and leaving more room for the big bottom left. I was able to do that easily using flexbox. Inside the bottom-left panel there is an area that is supposed to be scrollable when the up-left panel is visible. When it is collapsed the scrollable area is supposed to have enough room to display its content.
That last expectation is what I struggle with. The scroll area is not applying the overflow-y style attribute and its height is the whole content even though it is outside its parent (the bottom-left panel).
So far I tried playing around with flexbox, setting each panel as a flexbox, setting height and various other things but nothing seems to work. Unfortunatelly I do not control the content and won't be able to fix its height. Since it needs to expand, setting a max-height attribute doesn't work.
Here is an example on fiddle.
EDIT :
From #Pablo-Binar comment, it appears flexbox don't work that great with % height attribute. I haven't found anything in the doc unfortunately.
Also from #Pablo-Binar comment, one solution is to set a height in px to the root node giving flex attributes to the child and to the final one (the scrollable one) set an height in percentage (height:100%).
Use this code
height: 100%.
If that's to high use
height: calc(100% - 30px);
That should do the job.

Can you control mobile Chrome's "inferred layout height" (for horizontal layouts)?

Lacking better terms for the problem, this question got a bit long. Sorry!
I've been trying to build a simple horizontal layout with a bunch of <div>s with width: 100%; height: 100% next to each other ("screens" of an app that you can swipe).
In Chrome's responsive preview, as well as on a real device, empty space appeared below the <div>s — no invisible objects, no traces of the excess height in any DOM properties.
Here's a gist, try it via bl.ocks.org. Scrolled all the way down, it looks like this:
Red/blue are the divs, yellow is bodys background-color.
In a related answer I found this:
Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
Which means that if my content is wider than the viewport, a minimal height will be calculated for it. I find this weird, and came up with workarounds:
set html, body { overflow-y: hidden}
put all children of <body> inside a <div> wrapper
Since both methods have downsides or aren't always applicable, I am wondering: is there a way to control this behavior, like, set the inferred layout height to "auto"?

Div contents extending size of page rather than scrolling its contents regardless of overflow attribute

I am blocking out a new page for my site that is going to be responsive with a sliding divide separating 2 columns. On the left column I have a couple vertically stacked divs, the bottom of which I want to scroll its contents when it overflows. I want only the div to scroll and not the entire page.
I have already set the overflow-y to scroll and while this does produce the scroll-bar it still expands the entire page rather than recognizing the edge of the window. I have a feeling it has to do with the parent containers size not being fixed and I thought setting it to max-height: 100%; would resolve this but it has not.
here is the jfiddle
jfiddle
It is basically just a grab from my sandbox site wtb.dsdcs.com but it seems to behave the same in the jfiddle so it should suffice.
Just a disclaimer: there is a video the autoplays in both the website and jfiddle that I left intact in-case its container is part of the issue, so may need to turn down speakers.
Clarification: #PlayList is the element I wish to be able to scroll.
You need to give your Playlist class a height - (e.g 400px). Then, as you add more a items you should get a scrollbar. You can remove max-height as that won't be needed.
If you want a dynamic height of the playlist, that always takes up the remainder of the height, you could add a jQuery script:
var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);
Since your videoWrapper is set to take up 50% of the height, the other approach could be to set your playlist to have the other 50%. So set it to height: 50%.
.playlist {
padding: 10px;
font-size: 12px;
overflow-y: scroll;
height: 50%;
position: relative;
}
EDIT 17 Oct:
The reason the above might not work with all browsers is probably because of your implementation. Like I said in the comments below, you shouldn't be using table-type display properties because they don't support overflow very well.
The W3C even say that the overflow property only applies to block-type elements LINK.
The MDN suggests the same LINK.
As such, implementing overflow on any table-type element will always be a tricky and risky approach as browser support issues or browser display inconsistencies should be expected. To get a fully supported solution, I'm afraid you'd have to try other display properties such as flex or block.
Unfortunately, there is no way to get a fully supported solution for overflow on table elements, and therefore such answer cannot be provided. The only real "solution" here that would actually solve your problem would be a complete (or partual) overhaul of your entire site.
However, I hope the above gave you hint of direction of what to do next and as such being an acceptable answer for you.
Good luck!

Map & widgets that fill browser window

I have a webpage that has a Map (google), Chart, and Grid. They share the screen via Splitters and TabStrips. I am having an impossible time making them expand to 100% of height/width of the space that they have available to their
An example is worth more than 1,000 words:
I have created a stripped down JsFiddle that shows the problem:
http://jsfiddle.net/drysg/Rh7cL/
Full Browser version: http://jsfiddle.net/drysg/Rh7cL/embedded/result/
I have tried all sorts of CSS tricks (display layout, block, using height: 100%, width: 100%, explicit setting of all width/height in the hierarchy. But nothing is working. I simplified the CSS to illustrate.
I am looking for a pure CSS solution that:
Expands Grid, Chart, and Map to fill the screen at outset
Browser Resize will dynamically resize the Grid, Map, and Chart
(they will shrink to available space like any good WPF or Silverlight app!
If needed, I would tolerate a JQuery approach that responded to window resize events.
If you look closely you will see there are actually 4 issues:
The map height is not 100% of the needed space
The TabStrip that holds the Chart & Grid is not filling 100% of the height
There is a scrollbar on the TabStrip that holds the Chart
and Grid (I want that removed since they should be filling the space)
What I do want is the scrollbar of the Grid to be working (and that way I won't have a scrollbar on the TabStrip)
The layout hierarchy is as follows:
I. Top Window
1. Title DIV
2. Splitter
A. Map
B. TabStrip
i. Table DIV
a. Menu
b. Grid
ii. Chart
Set both BODY and HTML elements to { height:100%; overflow: hidden} and then reinstate your commented DIV height rule back to 100%;
See http://jsfiddle.net/t4dzj/1/ - does that take care of it?