i'm trying to get a row cut into three segments following the below premises:
First segment must have a max-height and always stay on top (min-height:0; max-height:40%). Minimum height can be 0. Scroll must appear if content doesn't fit max-height.
Third segment must be placed on bottom (no fixed height). Height must be inherited from its content.
Second segment must expand 100% of the remaining height. Scroll must appear if content doesn't fit remaining height.
I've tried with the following code https://gist.github.com/anonymous/24809e7b981f4ca7e6fb but the problem i'm experiencing is the middle/second segment expands to bottom overlapping the third segment.
Does anyone know how should i proceed? Thx
This might work:
<div class="row">
<div class="first-row" style="max-height:40%;scroll:auto;"></div>
<div class="second-row" style="height:100%;"></div>
</div>
<div class="row">
<div class="third-row" style="position:absolute;bottom:0;">
</div>
Related
I have been trying so many different solutions to solve this problem without reaching any solution that actually works so I cant post any css (since its not working properly, so I dont even know if its the correct "way" to build further on anyway).
Case: One div with width 100% (its parent varies in size) with two children inside. The div should never exceed hight of one text line/ text row.
<div class="parent">
<div class="child">Text from left</div>
<div class="child">Text from right</div>
</div>
Goal: Make the children divs auto adjust to fit as much text as possible (on that one row) and if the childrens width together exceed its parent div width then hide the overflowing text in second child with ellipsis.
Is this possible with pure CSS? With script I sort it but not with only CSS.
Thanks (sorry for bad english).
I've been looking here for the answer to this and I've seen a lot of questions, but nothing that addresses what I am trying to accomplish.
Essentially I am creating a location finder with a map on the right and a list on the left. Currently there are over 18,000 locations that can be searched so the list of locations on the left could be long and it doesn't make much sense to have the list extend beyond the size of the map on the right.
The layout I am looking for is similar to this:
To keep things responsive, I would like the height of the columns in the second row to be set with a percentage and not a pixel amount. I don't necessarily care much about the height of the map on the right, it's going to be sized using the responsive embedding that bootstrap has, and it works fine, but the problem I am having is getting the list on the left to overflow instead of just growing.
I've tried adding the various sizing classes to the column with overflow-auto. I've tried wrapping the contents of the column in another div and applying those classes. Nothing seems to work correctly.
The closest I got was getting the contents of the column to overflow and show the scrollbar, but the parent div still maintained the original height of the div so there was a huge amount of whitespace at the bottom under the row.
This whole thing is making me absolutely insane! I can't believe that something like this could be so difficult. The sizing classes examples seem to show what I'm looking for, but they aren't working in practice.
At the moment, this is what I have: https://codepen.io/zachattack05/pen/aeLmmv
--------------------------- UPDATE ---------------------------
After trying Zim's suggestion, the page is rendering the scrollbar correctly, but it appears to be much bigger than the 25% that's expected.
Here's a fullsize screenshot of the outcome and the row, despite having h-25 set, it appears to be 75% of the screen at least.
A better representation of what I am looking for might be something like this, but not to scale. The map area would be 25% of the height of the page. Essentially, the map area is sandwiched between some other rows. and then a footer at the bottom of the page. I don't want the map and the scrolling div to stretch all the way to the bottom of the screen, that's way too tall.
There have been other questions on this. Flexbox items are equal height and will always grow to the height of the tallest column. If you want to limit the height of one column, so that the other one scrolls, use an inner position:absolute element...
https://codeply.com/go/kYFBFBc28l
<div id="PanelLocationFinderContent" class="row flex-grow-1 position-relative">
<div id="locationlist" class="col-sm-4 overflow-auto bg-info">
<div class="position-absolute">
<p>text</p>
<p>text</p>
..
<p>text</p>
<p>text</p>
</div>
</div>
<div class="col-sm-8 bg-warning">
<div class="embed-responsive position-static">
<div class="embed-responsive-item embed-responsive-1by1 bg-secondary">
<div id="map" class="bg-success h-100">MAP CONTENT WILL BE HERE</div>
</div>
</div>
</div>
</div>
I was just wondering if someone can give me a hand, i've tried for 3 hours to solve this issue. I need to have the interface like on the picture by using grids, or anything.
The closest thing i can get is when everything displayed correctly except the second bottom grid. It usually gets below the white line (thats the starting point).
Could someone give me a tip on how to get around this problem.
You have minimum two options:
one is to make the grid elements absolutely positioned and give them top, left, right and bottom values. The parent element (grid container) should have "position:relative;" (or can be fixed or absolute, but in your case relative will make more sense).
Another option is to write markup like this:
<div class="col-xs-6">
<div class="col-xs-12">
one
</div>
<div class="col-xs-12">
two
</div>
</div>
<div class="col-xs-6">
three
</div>
Basically you wrap the two divs on the left into one parent div so the layout will not break. Just make sure the height of inner divs are 50% of the height of the right box.
For long time I haven't been able to figure out why the width of my container gets wider when the height of the browser is reached, I mean:
As seen in pictures:
1) Container hasn't reached the bottom of the screen.
2) Container has reached the bottom of the screen.
As you can see somehow in 2nd picture container width gets bigger.
Now, the given example is shown using text only, however the same thing happens if I use columns inside the main container.
Here is the code I'm using:
<form id="exmple" runat="server">
<div class="container well" style="margin-top: 5em;">
<div class="row">
<!--sometext content here-->
</div>
</div>
</form>
What is causing this? No CSS has been modified and no custom CSS files are in use.
If you want the content to "look and have same width/position" whether there is 1 or 1000 lines, do this and there will be a scrollbar all the time.
html {
overflow-y: scroll;
}
max-width will keep the width of your container to a maximum set amount.
Once content is added the width should not be altered.
You can obtain this through CSS
EDIT: if you want the div itself to be scrollable add the following line overflow-y: scroll;
Did not know that was another thing you were looking for.
I have one main div covering the 100% of the available space in webpage, and it contains three others divs, like this:
<div id="container">
<div id="header"/>
<div id="content"/>
<div id="footer"/>
</div>
I need two of them (the yellow ones) to be resizable, because their content is dynamic and sometimes need more than a single line of text. So, what I need is they cover the 20% of the available space but if they need more to resize and make the center div smaller. What should I read about? I don't find the keywords to google it. Thanks a lot!
This is a "not-working demo" haha:
Use the CSS min-height property on the header and footer divs, and remove the height property from the content div.
#header, #footer {
min-height: 20%;
}
I don't believe these answers are understanding the question.
If I get you correctly, you want to have the top and bottom be some minimum height (say 20% each), and the center fill the rest.
In that case you will have to use JavaScript. Find the height of window and set top and bot to have a min-height. This will allow them to scale. From there you will get the height of the head and the foot, subtract them from the height of window, and set the content area to be that height.
I would write you out an example but it sounds like you want to do it yourself, which I commend.