I have a container, within which is a row of columns. I am trying to create 3 columns with fields and a full height vertical separator between each. I am using 24 column grid system with Bootstrap.
I can't seem to get the line to dynamically go full height; tried playing with parent div's height, absolute positioning, etc...
<div class="row">
<div class="col-md-7">
content
</div>
<div class="col-md-1 vertical-stroke">
<div class="col-md-7">
content
</div>
<div class="col-md-1 vertical-stroke">
<div class="col-md-7">
content
</div>
Two concepts I've been playing with are:
.vertical-stroke {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background-color: #fff;
}
Above causing everything to get out of whack, displaying a giant line not at all where I intended.
and below, which displays a very short line... even though it's parent div is the full row which has a much taller height
.vertical-stroke {
height: 100%;
width: 1px;
background-color: #fff;
}
1) How can I create a full height vertical line?
Related
I'm using bootstrap, with the following html:
<div class="container-fluid h-100">
<div class="row align-items-center h-100">
<div class="col-md" align="center">
<h2>Login</h2>
<form>
<table>
<tbody>
</tbody>
</table>
<button type="submit">Login</button>
</form>
</div>
<div class="col-md-auto h-100 d-none d-md-flex">
<div class="vertical_divider"></div>
</div>
<div class="col-md" align="center">
<div class="signup_button"><p>Signup</p></div>
</div>
</div>
</div>
With the following relevant css:
.page_content {
border: 3px solid orange;
border-radius: 20px;
padding: 30px;
height: 75vh; #Changing this to 'auto' makes the vertical divider disappear
max-height: 75vh;
overflow-y: scroll;
}
.vertical_divider {
position: relative;
height: 100%;
width: 0;
border: none;
border-right: 3px solid $bordercolour;
}
Fiddle: https://jsfiddle.net/aq9Laaew/176561/
This makes a div that is always 75% of the viewport height, regardless of its content. This works perfectly.
I want to modify it so that the div is only as big as its contents, up to a maximum of 75vh. If the content is bigger than that, the overflow should scroll within the div. I've done this by changing the height attribute of the page_content class to auto. This works, except that it makes the central orange line disappear (this happens in the fiddle too, if you change the setting).
Why does this happen? h-100 should make the column containing the vertical divider 100% of the row, and yet it doesn't. I've tried making various styles !important, but that didn't make any difference.
Why does this happen?
Because a percentage height only works when the parent element has a set height, with the exception of the html tag. When you set .page_content height to auto, there is no longer a set height on the parent element of the divider, and thus a percentage height does nothing.
To make it work you either need to ensure that the parent element chain all the way until html has a set height (i.e. not auto). Or as an alternative solution, if your middle column has no other purpose than the divider line, the whole column is kind of pointless since you can just create the line as a CSS border of one of the two other columns.
So I'm using Bootstrap 4 with two columns. The two columns currently match each other in height, but I will have so much content in the left column that I'll need a scrolling div whose height spans the rest of the container. The issue I'm running into is that it's currently within a column div whose height is set to 100% (which makes it match the other column).
As a sidenote, this class only has a max-height set in the fiddle so that it doesn't stretch the left column, which already matches the height of the right:
.recent-articles-list {
max-height: 30rem;
}
Any help would be much appreciated, thank you! I have a feeling it might be something simple, but I haven't been fruitful in my research. (I've tried solutions using absolute positioning, setting height to 0/1px...)
JSFiddle: http://jsfiddle.net/3zeh7af4/
(Do note that the viewport has to be above 1200px to see what I'm talking about.)
Added image for desired effect:
What I understand from your problem depiction is that you want left column to be exactly same as right even if right column height is varying, and off course for left column to have scroll you need to fix it's height so you have done.
.recent-articles-list {
max-height: 30rem;
}.
if that's the case, the good solution for this situation is the code below
.recent-articles {
background-color: #fff;
padding: 1rem;
height: 100%;
position: relative;
}
.recent-articles-list {
padding-right: 1rem;
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
}
What you seem to be asking for is to shrink the height of the left column, to match the height of the right, and then scroll any overflow in the left column which is this: https://www.codeply.com/go/UTOSeASfnt
.recent-articles {
flex: 1 1 0;
overflow-y: auto;
}
.recent-articles-list {
overflow-y: auto;
}
However, IMO, that layout doesn't work well 😞 since the user must scroll the body of the entire page in order to see all content in the left column (when the content on right is taller than the viewport). The question doesn't explain what you expect to happen when the content on the right is taller than the viewport.
A better solution is to create a full-height layout, and then have the 2 sides scroll independently. You can do this by making the left side fixed or sticky as shown here...
Sticky left column:
.mvh-100 {
height: 100vh;
}
.recent-articles {
overflow-y: auto;
position: sticky;
top: 1rem;
}
.recent-articles-list {
overflow-y: auto;
}
<div class="container-fluid body-container">
<div class="row">
<div class="col-xl-5 py-3">
<div class="shadow recent-articles bg-white mvh-100 p-3">
<h5>Recent Articles</h5>
<div class="recent-articles-list">
...
...
</div>
</div>
</div>
<div class="col-xl-7 py-3">
<div class="row">
<div class="col-xl-12 shadow">
...
</div>
<div class="col-xl-12 shadow">
...
</div>
<div class="col-xl-12 shadow">
...
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/cNfS3EOQdV
Fixed left side:
Another option is to make the left side position:fixed, but it's more complex as it requires calc to adjust for spacing.
https://www.codeply.com/go/AqFxOD8gst
Related: Fixed and scrollable column in Bootstrap 4 flexbox
I'm trying to come up with simple way of creating a grid like container that has 2 columns, one column split up into 2 rows and the other column full height. Here's an image illustrating what I'm after.
It looks a bit complicated but I was thinking about using a responsive grid system to get this to look the way I want. I've tried various grid layouts and none seem to be able to mimic what I'm after, mainly the right column being full height and the left column being split into two.
Does anyone know of a way to do this? I tried bootstrap but it's not really responsive enough for this I feel. Please correct me if I'm wrong. Any guidance would be very much appreciated.
Thanks!
Using Bootstrap, here's an example structure. Just about any responsive grid will be similar. If you want to write your own grid, use your browser's document inspector to check out what Bootstrap does for the row and column elements.
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 pink"></div>
<div class="col-xs-12 green"></div>
</div>
</div>
<div class="col-xs-6 blue"></div>
</div>
</div>
Demo
If you want something that fills the screen vertically (but may need internal scrollbars to contain your content), this would do:
div {
position: absolute;
width: 50%;
height: 50%;
}
#one {
top: 0;
left: 0;
}
#two {
top: 50%;
left: 0;
}
#three {
top: 0;
left: 50%;
height: 100%;
}
Demo
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
In the body of my page I have split the 12 columns into a body which is 8 columns wide and a sidebar which is 4 columns wide. These two areas are a different colour to the background, so I want them to appear as if they are on top of the background. The problem is that when I set a margin between the two areas in order to make them appear as 2 separate areas it effects the layout of my website as now we have 8 columns, 4 columns and this margin, so the sidebar is pushed below the content. How do you add in a margin like this to separate the two areas without destroying bootstrap's grid layout?
edit: I know I could just nest them and essentially add in a column between the two areas, but I only want a margin of say 15px between the two areas.
Code:
<div class="container">
<div class="row">
<div id="content" class="main-content-inner col-sm-12 col-md-8 bg">
</div>
<div class="sidebar col-sm-12 col-md-4 bg">
</div>
</div>
</div>
.bg {
background-color: #fff;
}
.sidebar {
padding-top: 40px;
border-left: 15px solid transparent;
}
You can change the width of the sidebar and add a margin-left to it :
DEMO
.bg {
background-color: #fff;
min-height:150px;
}
.sidebar {
padding-top: 40px;
width:31%;
margin-left:2.3333%;
}
Im having an issue with the header of my code. The header is split into 3 different column's two of which are currently populated with text and an image. (center is yet to be filled).
I notice that when i reduce the size of my browser (zoom in,out) two of the header column's start to break away from the content. The right column stays fixed to the content below because it is populated with text however the center column and the left column being less populated start to break away.
Is it possible to force my 3 column header to stay attached to the content below? Im worried that if someone views the site on a large screen or perhaps a retina display it is going to break away.
<div class="col span_1_of_3 a">
<div class="col span_1_of_3 b">
<div class="col span_1_of_3 c">
CSS is as follows:
.span_3_of_3 {
width: 100%;
}
/* line 28, ../sass/test.scss */
.span_2_of_3 {
width: 66.1%;
height:100%;
}
/* line 32, ../sass/test.scss */
.span_1_of_3 {
width: 33.32%%;
height:100%;
}
Wrap the divs in a parent div. Then float the children and give them a relative width.
<div class="header">
<div class="col span_1_of_3 a">
<div class="col span_1_of_3 b">
<div class="col span_1_of_3 c">
</div>
css:
.header { width:100%; overflow:auto; }
.col { float:left; width:30% }
You can use display: table-cell on each .col and display: table on parent (*). That will force your "cells" to have the same height and stay on the same row.
Though I wonder how you managed your witdths? Is it in percentage or em? You didn't include any CSS so it's impossible to figure.
(*) Add table-layout: fixed on this same parent if you want precise widths to be applied, otherwise the browser will also adapt to the content of each "cell".
Image re sizing will be out of control unless you set the Width/Height to percentage or relative values.
if you don't want to do this, simply set the min-width and min-height CSS Properties.
i prefer the relative sizing (ex. width: 30%; text-align: left;)