I am using Bootstrap. Sidebar row height is equal to. Idont want this
html, body {
height : 100%;
overflow-x : hidden;
background-color : #F6F8FC;
}
.sidebar {
display : flex;
flex-direction : column;
height : 100%;
background-color : #171829;
box-shadow : 0 0 21px 0 rgb(89 102 122 / 10%);
}
<div class="col-md-2" style="padding: 0;">
<div class="sidebar">
<div class="logo">
<span>Admin Panel</span>
</div>
<div class="category">
<ul>
<li>Gösterge Paneli</li>
<li>Yazılar</li>
<li>Sayfalar</li>
<li>Kategoriler</li>
<li>Kullanıcılar</li>
<li>Site Ayarları`</li>
</ul>
</div>
</div>
I want to set the sidebar height to 100%.
instead height: "100%" use min-height: "100vh"
.sidebar { min-height: "100vh" }
Related
I have a parent div, that at least contains one child. In some cases it will contain 2 children and in the last case it will contain 3 children.
I would like to achieve that in all three cases the children expand to the 100% width.
Case1
Here childrenA should be width:100%
<div class="parent">
<div class="childrenA"></div>
</div>
Case2
Here childrenA should be width:50% and childrenB should be width:50%
<div class="parent">
<div class="childrenA"></div>
<div class="childrenB"></div>
</div>
Case3
Here childrenA should be width:33%, childrenB should be width:33% and childrenC should be width:33%
<div class="parent">
<div class="childrenA"></div>
<div class="childrenB"></div>
<div class="childrenC"></div>
</div>
Yeah width can be set automatically with the help of flex box assuming the height of the child elements is specified;
on Parent div
.parent {
display:flex;
}
assuming the height of children divs to be 100px,we can do
.childrenA{
background-color:violet;
height:100px;
flex:1;
}
.childrenB{
background-color:grey;
height:100px;
flex:1;
}
.childrenC{
background-color:green;
height:100px;
flex:1;
}
flex:1 is a shorthand for
flex-grow : 1; ➜ The div will grow in same proportion as the window-size
flex-shrink : 1; ➜ The div will shrink in same proportion as the window-size
flex-basis : 0; ➜ The div does not have a starting value as such and will
take up screen as per the screen size available for
e.g:- if 3 divs are in the wrapper then each div will take 33%.
.childrenA {
background-color: violet;
height: 100px;
flex: 1;
}
.childrenB {
background-color: grey;
height: 100px;
flex: 1;
}
.childrenC {
background-color: green;
height: 100px;
flex: 1;
}
.parent {
display: flex;
}
<div class="parent">
<div class="childrenA"></div>
</div>
<br>
<div class="parent">
<div class="childrenA"></div>
<div class="childrenB"></div>
</div>
<br>
<div class="parent">
<div class="childrenA"></div>
<div class="childrenB"></div>
<div class="childrenC"></div>
</div>
I have a grid with three images and one text section. I have column and row gaps for the gride which work fine if I have all three images. However, if any of the images are missing, I still get column or row gaps for the missing column or rows. Is there any way for those gaps to collapse to nothing if the rows or columns are not there?
The example that I have included gives the three cases with 1, 2 or 3 images in a responsive design. In the one image example you can see the extra column gap at the right. When the browser gets skinny the row gaps for the missing rows become visible.
div.thumbnail
{
background-color: green;
padding : 1em;
break-inside : avoid;
display : grid;
column-gap : 1em;
row-gap : 1em;
grid-template-columns : auto 1fr auto;
grid-template-areas : "image1 text image2"
"image1 text image3";
}
div.thumbnail div.image1
{
background-color : cyan;
text-align : right;
grid-area : image1;
}
div.thumbnail div.image2
{
background-color : pink;
text-align : left;
grid-area : image2;
}
div.thumbnail div.image3
{
background-color : limegreen;
text-align : left;
grid-area : image3;
}
div.thumbnail div.text
{
background-color : orange;
grid-area : text;
}
/* for printing and small devices like iPhone #1 */
#media screen and (max-width: 760px), print and (max-width: 5in)
{
div.thumbnail
{
grid-template-columns : 1fr !important;
grid-template-areas : "image1"
"image2"
"image3"
"text";
}
div.thumbnail div.image1,
div.thumbnail div.image2,
div.thumbnail div.image3,
div.thumbnail div.text
{
text-align : center;
width : auto !important;
}
}
<h2>One Image</h2>
<div class="thumbnail">
<div class="image1" style="width:200px">
image 1
</div>
<div class="text">
Text
</div>
</div>
<h2>Two Images</h2>
<div class="thumbnail">
<div class="image1" style="width:200px">
image 1
</div>
<div class="image2" style="width:200px">
image 2
</div>
<div class="text">
Text
</div>
</div>
<h2>Three Images</h2>
<div class="thumbnail">
<div class="image1" style="width:200px">
image 1
</div>
<div class="image2" style="width:200px">
image 2
</div>
<div class="image3" style="width:200px">
image 3
</div>
<div class="text">
Text
</div>
</div>
Thanks,
Mike
Don't use template but place the item explicitely in the needed place. Notice how I changed the media query to have min-width instead of max-width so we only need to define the item placement on big screen and we keep the default one on small screen
div.thumbnail {
background-color: green;
padding: 1em;
display: grid;
gap: 1em;
}
div.image1 {
background-color: cyan;
}
div.image2 {
background-color: pink;
}
div.image3 {
background-color: limegreen;
}
div.text {
background-color: orange;
}
#media screen and (min-width: 760px) {
div.thumbnail {
grid-template-columns: auto 1fr; /* define only 2 explicit column */
grid-auto-flow: dense;
}
div.image2,
div.image3 {
grid-column: 3; /* add another column if (2) or (3) is present */
}
div.text {
grid-column: 2;
}
/* (1) and text span 2 row when (3) is present */
div.image1:nth-last-child(4),
.image3 + div.text{
grid-row: span 2;
}
[class*=image] {
width:200px;
}
}
<h2>One Image</h2>
<div class="thumbnail">
<div class="image1">
image 1
</div>
<div class="text">
Text
</div>
</div>
<h2>Two Images</h2>
<div class="thumbnail">
<div class="image1">
image 1
</div>
<div class="image2">
image 2
</div>
<div class="text">
Text
</div>
</div>
<h2>Three Images</h2>
<div class="thumbnail">
<div class="image1">
image 1
</div>
<div class="image2">
image 2
</div>
<div class="image3">
image 3
</div>
<div class="text">
Text
</div>
</div>
I've got this strange issue with my body content container. I want it to be as tall as the view port so I set its height to 100vh in the css. It works in all pages except for the one where I try to make a bootstrap grid inside this body content container.
Here you can see how it looks:
The blue-ish div is my body content.
When I zoom all the way out, they blue div's height is indeed 100vh.
Inside of it I've got this
<div class="container body-content">
<div class="row text-center">
#foreach (var item in Model.Products)
{
#Html.Partial("ProductColumn", item)
}
</div>
</div>
where Html.Partial renders on every iteration something like this:
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 product-column-wrapper">
<div class="product-column">
//product title
<div id="thumbnail-container">
<a class="d-block mb-4 h-100" asp-route="#WebConstants.Routes.ProductDetails" asp-route-id="#Model.Id" asp-route-title="#Model.Name">
<img id="thumbnail" src="#Model.ThumbnailSource" class="img-responsive img-thumbnail" alt="#Model.Name">
</a>
</div>
//price
//Edit, Delete buttons
</div>
</div>
Here is some of my css classes:
body {
padding-top: 50px;
padding-bottom: 20px;
}
footer {
color: white;
font-size: 13px;
text-align: center;
vertical-align: middle;
max-height: 15px;
}
.body-content {
background: aliceblue;
border-radius: 5px;
padding: 10px;
height: 100vh;
}
If anyone could help me find out how to stretch the body content in this scenario, that would be great.
Instead of height: 100vh try using min-height: 100vh. E.g.
.body-content {
background: aliceblue;
border-radius: 5px;
padding: 10px;
min-height: 100vh;
}
<div class="wrapper">
<div class="sidebar-wrapper"></div>
<div class="content-wrapper"></div>
</div>
The height of content-wrapper is dynamic (auto). Is there any way to get the height of it and use it for the sidebar-wrapper so that it looks nice?
Displaying them like table cells would do it. Table cells can adjust their height automatically to the content, and all cells on the same row get the same height. If you give the side bar a fixed width (which is likely), you can easily get the content wrapper to fill the remaining space.
Whichever has the longest content will determine the height.
.wrapper {
width: 100%;
display: table;
}
.sidebar-wrapper,
.content-wrapper {
display: table-cell
}
.sidebar-wrapper {
width: 200px;
background-color: silver;
}
.content-wrapper {
background-color: yellow;
}
<div class="wrapper">
<div class="sidebar-wrapper">Here is <br>content<br>that is .....<br><br><br><br><br><br>Quite long</div>
<div class="content-wrapper">Smaller content</div>
</div>
Flexbox is an alternative to #GolezTrol's CSS tables.
.wrapper {
display: flex;
}
.sidebar-wrapper {
width: 200px;
background-color: silver;
}
.content-wrapper {
background-color: yellow;
flex: 1;
}
<div class="wrapper">
<div class="sidebar-wrapper">Here is
<br>content
<br>that is .....
<br>
<br>
<br>
<br>
<br>
<br>Quite long</div>
<div class="content-wrapper">Smaller content</div>
</div>
I have a row layout with a nested flex container in the second flex item of the root container. I want the nested flex container to be 100% of the used height of its parent.
<div class="steps root"><!--root container-->
<div class="step one">
I am very tall. Others should be as high as I am!
</div>
<div class="step two-and-three">
<div class="steps"><!--nested container-->
<div class="step two">
nested child 1. should have 100% vertical height
</div>
<div class="step three">
nested child 2. should have 100% vertical height
</div>
</div>
</div>
Here is the fiddle demonstrating the issue: http://jsfiddle.net/2ZDuE/316/
If I set an explicit height to my nested flex container, then everything works.
How to tell the nested container to automatically fill up vertical space of its container?
add display:flex to .step.two-and-three and remove padding-bottom
.steps.root {
width: 700px;
}
.steps.root>.step.one {
height: 300px;
/*simulate big content in left column*/
}
.steps {
display: flex;
}
.step.one {
flex: 1 1 33%;
background-color: rgba(0, 0, 0, 0.1);
}
.step.two-and-three {
flex: 2 1 66%;
background-color: grey;
display: flex; /* added */
}
.step.two {
flex: 1 1 50%;
background-color: green;
}
.step.three {
flex: 1 1 50%;
background-color: lime;
}
.step.two-and-three>.steps {
background-color: olive;
padding-bottom: 10px;
}
<div class="steps root">
<!--root container-->
<div class="step one">I am very tall. Others should be as high as I am!</div>
<div class="step two-and-three">
<div class="steps">
<!--nested container-->
<div class="step two">nested child 1. should have 100% vertical height</div>
<div class="step three">nested child 2. should have 100% vertical height</div>
</div>
</div>
</div>