I'm trying to design a page with a set background color, but I'm having some difficulty.
I've got a parent container that sets the height with min-h-screen as well as assigns the background color. My inner child doesn't inherent height from the parent, so the behavior is off. I can fix this by using h-screen in the parent, but then any overflow content in the child isn't within the background.
I've thought of a few solutions, some using flexbox and another using overflow-scroll, but none of these feel like the proper solution. I was curious if someone could point out the correct way to solve this issue?
Here's an example of the undesirable behavior:
I've created a tailwind playground that shows the behavior here: https://play.tailwindcss.com/psM22NgfLj
On the top level container, you have min-h-screen which means the container should always be at least as tall as the viewport. You also have h-0 which isn't helpful. The first step would be to remove your fixed height. By setting the height to 0, the container is fixed to no greater than the height of the screen, impacting your scroll behaviour.
Next up, remove all occurrences of h-full.
The first child container, with bg-gray-800, was set to h-full so my assumption is that you want that to also be at least full height. Set flex on the top-level container.
https://play.tailwindcss.com/V4amySWzDs
Update: Based on your feedback, I've set the third-level content container to take up at least the remainder of the page height.
https://play.tailwindcss.com/DNSQwgRMzf
That was done by applying flex to the bg-gray-800 container, changing the direction to column, and putting flex-1 on the content that needs to expand to fill the remainder of the height.
Related
I have a simple layout, with a container that has horizontal and vertical margin as well as a max width and height. On a computer screen, the max width and height makes it so that the margin is basically irrelevant. When I resize the window to be smaller (horizontally), the container eventually takes up the whole screen minus the margin, then gets smaller as well and the margin makes it so that there is some space between its border and the edge of the screen. However, vertically the margin is simply ignored and the container eventually goes right to the edges. I don't understand why that is happening and how I can fix it.
Here is a working example: I am using Tailwind, so that's what I used for the example as well: https://play.tailwindcss.com/t9LmsfyVfH
Edit: Here's also an image to make my point clearer:
As you can see, the horizontal margin does exist, but it's outside the window/page (or in case of the playground: container which contains the rendered content).
<div class="flex h-full items-center justify-center">
This is because of h-full class in the element. it has height 100%, that forcing element to render and squeezing the inner content. As scroll has not consider margins thus overflow is not causing, though you have given margins to the inner child.
You can override the css by simply adding custom class or parent class minimum height .customClass.h-full{min-height: 100%;}
You can easily work around this issue by adding an empty element above the container to hold that space like <div class="my-6"></div> it's top + bottom margins are equal to the top margin of your main.my-12
https://play.tailwindcss.com/nAB8wcyXzV
I'm trying to scroll some single-line labels in a single-line fixed-width container.
What I've tried so far is:
Create a container with fixed dimensions.
Place a scrollable container inside and attach the animation.
Place the labels.
The animation partially works, but the scrolling doesn't go all the way to what is configured (translateX(-100%)).
The overflowing part (green color in codepen) that exceeds the fixed container width is ignored.
I've tried various display and flex field combinations, but noting.
Here is a codepen sample.
https://codepen.io/efthymiosks/pen/QWQGVGg
The issue is that 100% is the size of the element, not the content. What I mean by this is because the content overflows the element, 100% only refers to the visible width of the container.
You need to change 100% to something else such as 150%. Unfortunately, this means that you need to know the width of the contents before. The only other way that I know of is using JavaScript to calculate the width of the contents.
Codepen
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.
Here is a sample design (make the preview wide -- ideally 800px).
https://jsfiddle.net/Brunni/2n3w33g9/
Basically it's a bunch of divs nested with flex and everything works well until container. Then I have the transitioner div which serves for push-right-to-left transitions (I put two example template-wrappers that are currently supposedly scrolling).
I don't understand why the transitioner div is computed as height=0. I guess children can not have a dependency on the parent since the parent is flowed depending on the children, but I couldn't find a statement that this is absolutely true.
Then things get worse since I need to absolute-position the template-wrappers that will be animated. My ultimate goal is to have the scroller/template-wrapper to be 100% of the container even though they are absolute-positioned. Is that even possible?