I have a website on which one of the pages should not be scrollable (the entire page should fit on the client's screen). On this site I need to have a list of selectable objects in a column, which could potentially be quite large (it will certainly eventually overflow the screen)
I have stored these items in a <v-list> component and ordered it to scroll when it overflows. The problem is however is that it is forcing its parent column to increase in size when the number of <v-list-item> elements is too high, destroying the non-scrollable page layout. It seems to be because all of the actual <v-list-item> components are still being rendered, which is stretching out the <v-list>, despite the fact that it is set to overflow when it reaches 100% of its parent height.
I am able to sort of fix this by defining max-height in terms of px. But this is not an acceptable solution because it needs to be fully responsive.
This is demonstrated in the codepen. The list in the purple column (initially commented out) should make the list scroll when it becomes larger than the purple column's height. But, instead, it stretches out the entire page height and makes everything render with a different height before finally starting to scroll.
Codepen link
The orange column is basically what I want, but obviously with max-height being defined in px it wouldn't necessarily be right on everyone's screen. But it should look sort of like this:
All colours are just for referencing.
As a final note, we did find some oddities about the fill-height parameter being used in <v-container>, apparently it is deprecated? But it was the only way we could consistently get the full page height to render properly before adding everything else.
I think I got what you were looking for: https://codepen.io/tino-hb/pen/eYvdMXO?editors=1000
It is a slightly different base layout, but I think it will do nicely and match your use case.
The keys are the 100vh for v-main and the combination of flexbox and max-height: 100% around the grid columns and lists.
<v-main style="height: 100vh;">
...
<v-col style="max-height: 100%; background-color: magenta;">
<v-list class="overflow-y-auto" style="max-height: 100%">
...
...
</v-main>
Related
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.
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.
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"?
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
I'm building a tab bar in css, and want it to be able to handle having more tabs than can be shown on the screen. My HTML is structured roughly:
<div id="tabbar">
<div id="tablist"></div>
</div>
css:
#tabbar {position:absolute;width:100%;height:24px;overflow:hidden;}
#tablist {position:absolute;top:0px;left:0px;height:24px;}
div.tab {float:left;}
with all tabs inserted into #tablist. So long as the there are few enough tabs that they don't overflow, #tablist shrinkwraps correctly and I can get their collective widths. However, as soon as there are more than can fit on the screen, they wrap to the next line (though you can't see it, obviously, due to #tabbar's overflow:hidden), and #tablist's width ceases to accurately represent the total widths of the tabs.
I could set #tablist's width through javascript manually, adding the total widths of each tab, but this seems an awfully messy and error-prone approach. I could also use a table, but I'd rather not since it violates the whole css-for-layout theory.
What I'm looking for, in essence, is a means to shrinkwrap a div around its contents without its contents being wrapped to a second line due to the width of the div's parent.
EDIT: The purpose of this is to build a tab bar which allows the user to scroll when there are too many tabs, but in order to do that I need to know when the width of #tablist, or the total widths of all tabs, is greater than the width of #tabbar, so that I can activate the 'scroll right' button. I also need to know the exact width, not just the fact that it's wider, so that I know how far it should be able to scroll.
From what I understand, you want to keep the tabs on one line even if they're not shown on the screen, perhaps you'll be scrolling them? I could be wrong, but if I'm correct - you can simply set a big enough width on #tablist to float all tabs, which will then be hidden by the parent (#tabbar) overflow:hidden.
#tablist {width: 10000px}