This question already has answers here:
Pin element like position: fixed but inside its parent not the viewport
(3 answers)
Closed 4 years ago.
I'm building table that should be fully responsive (so I'm using flex on divs instead of table).
I want to be able to pin column.
Here what I've got https://codepen.io/piernik/pen/LmoBxM
What's the problem?
When You scroll left pinned column disapears.
It's probably that .row2 has width of viewport, not entire table.
You can see .row2's width on the red top border.
Can I fix it?
I want to build responsive table with pinned column that can have hsrcoll without any JS.
You used flex-basis:500px in cell that's why your table width larger than windows width and flex cover only all window width.
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 15 days ago.
Codepen: https://codepen.io/andrerpena/pen/JjBzKNg
I would like the button bar to always be visible where the blue --> is pointing, when the screen squeezes.
My document structure is like this:
div[#id='title']
div[#id='body'] <-- This should grow
div[#id='body-content'] <-- This should grow and be scrollable
div[#id='body-buttons'] <-- This should be fixed at the bottom
According to the above structure, I'd expect body-content to scroll and body-buttons to always be visible.
Why is it not? Is there any way to fix it without changing the DOM structure? If not, how would you change it?
I'm personally interested in knowing why it doesn't work, because I do CSS for more than a decade and I still get surprised by stuff like this.
Thanks.
Flex child has an initial value min-height: auto which means that it will not have height less than the content height (the texts). In this case you can add min-h-0 class to the div[#id='body'] (#body) element so that it doesn't have to have a minimum height. Here's the working codepen.
This question already has answers here:
Place boxes inside ul in center, but align them left
(1 answer)
Making a container fit the width of its children
(1 answer)
Closed 3 months ago.
How do I ensure that items in a container are centered regardless of screen size?
I am trying to create a responsive/dynamic layout on a web-page that has a container div and some results/items (divs) inside. I would like them to flow within the available width but have uniform margin/alignment within the centered div which I am struggling to achieve. Here are three images of what I want to achieve. This could be a desktop, a tablet and a phone:
So far I've had to go with a cut-off width of e.g. 800px and two different layouts, but that's not optimal. The container should be dynamic, for example 90% width but the items inside fixed width of 200px. I can use flow:left; or display:inline-block; to flow the items inside, but they will always be left aligned, so that when one "slides" down to the next line, the remaining are sitting to the left with a gap to the right.
This is probably a common use case, and I'm happy to be referred to other answers, but I haven't been able to search correctly in order to find the answer.
EDIT: I know that I can do this with JavaScript. I could probably use getBoundingClientRect on the container and with code adjust the margin of the items, but there must be a CSS solution :)
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 1 year ago.
We have text-elements with defined spacings in between them. They can be multiline.
Now if the text breaks inside of them, width:auto is not correct - it somehow should be recalculated after the text broke onto new lines.
Current situation:
Desired situation:
I created a simple fiddle for it: https://jsfiddle.net/zd73vfne/
max-width: 260px
is just for demonstration purposes, so the text breaks.
Using word-break is not an allowed solution per requirement.
I've added another example with multiple boxes next to eachother, which shows the problem even better: https://jsfiddle.net/zd73vfne/2/
Is there a pure CSS solution?
This question already has answers here:
Stretch image in iron-image element
(4 answers)
Closed 7 years ago.
Check out this jsbin
I want my images have auto height with sizing="contain", it means they won't have extra space. In my example those extra space are in red.
iron image is required to set a fixed height otherwise image not display, I tried height:auto and height:100% but not work.
I was using paper-material, should use paper-card
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Remove white space below image
I have this page HERE. All four boxes with the images (one long horizontal and 3 smaller ones at the bottom) all have empty space below the image and above the bottom border. If I make these boxes have a pixel height it goes away but I need to leave it at auto because its a responsive site (work in progress). I cannot figure out what I'm missing. Any suggestions would be great!
CSS is HERE
Thank You!!!
You can set the images inside those boxes to:
display: block
That should solve it.