I want the table height to fit the parent’s available height. Ideally, I want:
The footer to always be docked at the bottom of the parent container.
If the table contains a few rows, the footer should remain docked at the bottom.
If the table contains more rows than fit the parent’s height and needs to overflow then the overflow should be visible only for the table body, and the footer should remain docked at the bottom and not be pushed downwards.
A flexbox approach if possible (it seems to me that this is a flex scenario)
What I don’t want:
A height: 100vh approach
A calc (100vh - ***px) involved (because I want to use the methodology in arbitrary component hierarchies inside my solution)
Fixed heights in the table
To use absolute/fixed positioning
No 3rd party solutions (if possible)
To use .offsetHeight
Example: https://stackblitz.com/edit/react-8h5dpy
Visual Examples:
Growing an item to take all available space but not exceeding the height of the parent could work like follows:
.parent {
// use flexbox layout for children
display: flex;
flex-direction: column;
}
.childThatGrows: {
// take as much space as available
flex-grow: 1;
// don't take more space than available (elements are as high as their content by default)
min-height: 0;
overflow: scroll;
}
Why min-height: 0? See https://stackoverflow.com/a/36247448/3066632.
For your example this might look like this: https://stackblitz.com/edit/react-wgbzpb.
Related
I have a container that either has one or three sections. Inside each sections I have table and there is list of rows inside the table. I want to make all the height of the sections dynamic such that it occupies the entire space. If there are more tables records inside the section than I need to add scroll to table to scroll records. But at all times the entire height should be filled inside the container. How can I have min and max-height for all sections.
Design scenario If there are 2 sections instead of 3: Red is container and blue are sections which contains table.
The structure
Container
section1
table
section 2
table
section 3
table
height: auto;
Would fill the container, assuming there is enough content to fill the amount of space you want. If you're also looking for consistent space between the content: Flexbox has property called gap that lets you define the space between your sections:
display: flex;
flex-direction: column;
gap: 10px /* an example number, can be anything you want */;
In my application a user is able to input text and click a button to append a new 'span' to the DOM (within a container) containing their inputted text. I want these spans to have as much width as needed to fit the given user inputted text (you can assume the user wont input something longer than the container's width). I would also want the container to fit as many spans as possible within in a row; and if a span needs more room than is left in the current row -> go to the row below (see the last two lines of the picture).
What kind of CSS would I need to add to my container as well as the spans within it to achieve the organization below?
Please Note: the width of this container is fixed, but the height grows as needed to fit new text filled spans
As per you mockup, You can achieve your task by two way:
Use flex CSS3 property
Use CSS3 property width auto and float left in span class.
let span class="class-name"
.class-name {
display: inline-block;
width: auto;
float: left;
}
In this span class, you can add more property as per your need.
To do this with the CSS3 flex property:
.container {
display: flex;
border: 1px solid red;
width: 20rem;
flex-wrap: wrap; /* otherwise it will try to fit everything on one line */
justify-content: space-between; /* alternatives are space-evenly or space-around*/
}
see this pen, with flex you have the advantage that you have better control over how this width of the container is uses, with the float solution you cannot justify the content, it will all stick to the left and leave unused space on the right.
I want two side nav bars that are affixed, but when I scroll down, my left navbar column moves to the left side of its parent div.
I know the issue is that affix changes the position to fixed so any floats would be irrelevant.
My issue should be clear in this
http://www.bootply.com/deaSbNAJ0b - don't mind the right side bar
I believe the answer lies in the javascript. My first thought would be to alter the affix function to use the parent element's position to calculate the affixed elements position after it triggers, but I wouldn't know where to start, javascript is still new to me.
Basically this question has already been answered here. As explained in the docs..
Use the affix plugin via data attributes or manually with your own
JavaScript. In both situations, you must provide CSS for the
positioning and width of your affixed content.
So in this case you have to set a specific width for the affixed element. When it becomes position:fixed it's removed from the normal document flow, and won't maintain it's normal percentage-based "unfixed" width.
You'll need to adjust the width for what works best with the other page content, keeping in mind that position:fixed doesn't work responsively with the Bootstrap columns. Here it's applied only on widths greater than 991px so that the columns can stack normally on smaller screens.
#media (min-width: 992px) {
.affix-top {
position: static;
margin-top:10px;
width:240px;
}
.affix {
position: fixed;
top: 10px;
width:240px;
}
}
http://www.bootply.com/FlGXADz2L3
I'm kinda stuck here and I'm looking for some ideas. I have a breadcrumb system which uses :before and :after tags for the arrows.
The maximum width for all the breadcrumbs put together is 735px as that is the size of the container element.
Now; I need to restrict the length of each breadcrumb to stop them overflowing and to ensure that they all stay on one line. To do this, I will need to set a maximum width on the breadcrumb. However the max-width will depend on the number of breadcrumbs which are currently visible.
I know that the easiest way would be to count the number of breadcrumbs present and set a fixed position by dividing the container width by the number of breadcrumbs, but this is not what I want - It would mean that breadcrumbs with a shorter title have a large gap, like below.
So I need to specify a max-width, but the max-width will depend on the width of the other breadcrumbs.
For example, if all the breadcrumbs have a fairly long title, the max-width will need to be small enough to allow all breadcrumbs to fit in the container.
But if, say, five of the breadcrumbs have very short titles (ie 4 characters) and the fifth one has a longer title, I would want the max-width to allow all the text on the last breadcrumb to be displayed, but still ensuring that the breadcrumbs still fit inside the container.
Sorry if this is too confusing. Here's a jsFiddle of my breadcrumbs so you can understand how they're structured. If you need any more information please let me know.
http://jsfiddle.net/5CLYt/
The second example in the jsFiddle shows how the max-width needs to be dependant on the width of the other breadcrumbs, and not just the number of the breadcrumbs displayed.
Beside the answer of #JAYBEkster, you could consider using flexbox.
Here is a great resource: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've updated your fidle: http://jsfiddle.net/NicoO/5CLYt/1/
/*
COPIED FROM: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#container {
display: flex;
justify-content: space-around;
list-style: none outside none;
margin: 0;
padding: 0;
}
I know this is not what you want, since the space between the items is growing and not the items it self. But maybe it' the right direction.
Maybe keep this question updated.
Update 2: flexbox is awesome.
It works with firefox: http://jsfiddle.net/NicoO/5CLYt/3/
All you needed to do was:
.breadcrumbButton
{
flex: 1 1 auto;
}
You should add display:table for your container; add display:table-cell for each child and remove floating;
I have two layout elements lets say one is 33%, the other 66%. They both use 100% of my screen size (So it is dependent on browser window). The smaller element also has a min-size property, so it cant fall below 250px;
Now if the layout is at least 757px large (so the size where the min property doesn't apply) everything looks fine. If the layout falls below the 757px the second element starts to overflow since it still takes the 66%, so the sum of both layouts exceeds the 100%.
I made some graphics to show the behavior:
Layout 1000px not overflowing:
Layout 500px overflowing
Is there a solution to prevent the overflow (not overflow: hidden) so the second element takes only the remaining space when the first element reaches it's min width.
Also JavaScript shouldn't be used excessive!
Regards, Stefan
Sure, this is actually pretty easy and requires a very minimal amount of code:
HTML:
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
CSS:
.sidebar{
float: left;
width: 33%;
}
.content {
overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}
You can view the live demo here: http://jsfiddle.net/7A4Tj/
Edit:
If you're trying to achieve a site layout that has equal-height background images for the sidebar and content, all you need to do is wrap both those elements in a containing div and use the Faux Columns technique.
Try using the following for the second widget:
position: fixed;
right: 0;
Here´s my five cents
min-width on both divs
and a wrapper that also has min-width, plus both of the divs having percentage width
JS fiddle code
PS seems to be working fine in IE8
PPS Also do check out #media queries if you want to have conditional CSS rules on different window sizes, might be helpful. Will run on browsers supporting CSS3: CSS Media queries at CSS Tricks