I'm using FlexLayoutModule with Angular6 and trying to achieve two div's of both 50% height vertically. I have tried this particular code but both are not occupying 50% height of parent.
<div style="min-height:50px">I'm header</div>
<div style="height:100%">
<div fxLayout="column" fxLayoutGap="12px">
<div fxFlex="50%" style="background:#5896FF">
<h1>I should occupy 50% height of my parent</h1>
</div>
<div fxFlex="50%" style="background:#525252">
<h1>I should occupy 50% height of my parent</h1>
</div>
</div>
Link of so far working example
This is what I'm trying to achieve
I made a couple of changes to your example to have two div's split the screen vertically 50 / 50.
<div style="height:100%" fxLayout="column">
<div style="min-height:50px">I'm header</div>
<div fxLayout="column" fxLayoutGap="12px" fxFlex>
<div fxFlex style="background:#5896FF">
<h1>I should occupy 50% height of my parent</h1>
</div>
<div fxFlex style="background:#525252">
<h1>I should occupy 50% height of my parent</h1>
</div>
</div>
</div>
You also need to update styles.css:
html, body {
height: 100%;
margin: 0;
}
Here is a link to the updated example.
You can use 50vh instead of 50% . it will use 50% of the vertical height.
<div fxLayout="column" fxLayoutGap="12px" style="">
<div fxFlex="50vh" style="background:#5896FF">
<h1>I should occupy 50% height</h1>
</div>
<div fxFlex="50vh" style="background:#525252">
<h1>I should occupy 50% height</h1>
</div>
Related
I have an angular webpage using Angular Material and Flex-box. This page will have a graph that retains its ratio and therefore has a max-width set to prevent it from taking up too much vertical space. I want to set the parent div of the graph to only take up as much horizontal space as the child element. I will fill the rest of the horizontal space with a div that has fxLayout column and will stretch vertically.
Currently
<div fxLayout="row">
<div fxLayout="column" fxFlex>
<app-graph></app-graph> //max-width: 1300px
<app-results></app-results>
</div>
<div fxLayout="column" fxFlex="30" style="background-color: red;">
</div>
</div>
Update
I am getting closer. I found setting the fxFlex="0 1 1300px" gives me the behavior I want of the first div. I can't figure out what to do for the 2nd div so that it continues to fill the remaining space.
<div fxLayout="row">
<div fxLayout="column" fxFlex="0 1 1300px">
<app-graph></app-graph>
<app-results></app-results>
</div>
<div fxLayout="column" fxFlex="20" style="background-color: red;">
</div>
</div>
This is what I came up with to get what I wanted. Still not perfect, but it retains the min and max size of the first component.
<div fxLayout="row" fxLayout.lt-md="column" fxLayout="start stretch">
<div fxLayout="column" fxFlex="0 1 1100px" style="margin: 0 5px;">
<app-graph></app-graph>
<app-results></app-results>
</div>
<div fxLayout="column" fxFlex style="border: black solid 1px; margin: 0 5px;">
<p style="font-size: 4em">Stuff will go here</p>
</div>
</div>
I have image that have space when i look at device with resolution sm and xs how to make it fit with the grid?
here is my code
<div class="container">
<div class="row">
<div class="col-md-7">
<img src="http://placehold.it/550x350" class="img-responsive">
</div>
<div class="col-md-5">
<h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2>
<p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p>
</div>
</div>
</div>
from the resolution 991px to 581px I get blank space from image (like it didn't fit to the grid)
http://www.bootply.com/10CUN9fXqG#
How do I fix it?
I would just add width: 100%; to your image
May be it will be your solution code:
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<img src="http://placehold.it/550x350" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-md-5">
<h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2>
<p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p>
</div>
</div>
</div>
You're not using bootstrap classes for sm and xs screens, use that as well as change the img from max-width to width.
img{
width :100%;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7">
<img src="http://placehold.it/550x350" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-12 col-md-5">
<h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2>
<p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p>
</div>
.img-responsive {
margin: 0 auto;
}
Try adding custom styling
In a bootstrap 3 grid, one of the columns contains an image. How can one make it 100% height of another column? (with biggest height)
img-responsive will fit the width, but not the height. Here's a fiddle: http://jsfiddle.net/mariusandreiana/V2Hy6/17/
<div class="container">
<div>some content</div>
<div class="row bg">
<div class="col-xs-1">Text</div>
<div class="col-xs-6">
<p>
<h1>John Dough</h1>
1155 Saint. St. #33
<br/>Orlando, FL 32765</p>
</div>
<div class="col-xs-5">
<img class="img-responsive" src="https://c402277.ssl.cf1.rackcdn.com/photos/2842/images/hero_small/shutterstock_12730534.jpg?1352150501">
</div>
</div>
<div>more content</div>
</div>
Desired result: image's height is from "John Dough" to "Orlando", and the width should be proportional.
One option would be to use javascript to set img's height, but can it be done only via CSS? Would a table be a better fit than the grid?
Note: the "John Dough"'s contents are unknown, it's final height is known only at runtime.
You have to set a max-height to the parent :
Fiddle : http://jsfiddle.net/V2Hy6/19/
CSS :
.bg {
background-color: #FFAAAA;
height:100%;
}
.img-container{
height:100%;
max-height:200px;
}
img{
height:100% !important;
}
HTML :
<div class="container">
<div>some content</div>
<div class="row bg">
<div class="col-xs-1">Text</div>
<div class="col-xs-6">
<p>
<h1>John Dough</h1>
1155 Saint. St. #33
<br/>Orlando, FL 32765</p>
</div>
<div class="col-xs-5 img-container">
<img class="img-responsive" src="https://c402277.ssl.cf1.rackcdn.com/photos/2842/images/hero_small/shutterstock_12730534.jpg?1352150501">
</div>
</div>
<div>more content</div>
</div>
I am currently learning how to slice a theme and i would like some help on positioning a div under other divs. For example i would like to position the divs (box1-box3) under the AdSales&Announcements divs and for them to be centered. If you notice on the fiddle the divs are not centered ad the other divs. Thanks in advance.
<div id="AdSales">
</div>
<div id="Announcements">
</div>
<div id="Box1"></div>
<div id="Box2"></div>
<div id="Box3"></div>
http://jsfiddle.net/edwinakatosh/YjLCe/embedded/result/
wrap the three div in a wrapper div. you need to remove the top: style of your div, so the wrapper can do its job
HTML
</div>
<div id="Announcements"></div>
<div class="wrapper">
<div id="Box1" class="box"></div>
<div id="Box2" class="box"></div>
<div id="Box3" class="box"></div>
</div>
CSS
#adSales, #Announcements{top:0}
.box{top:0; }
.wrapper{width:780px; margin:0 auto; overflow:hidden}
margin: 0 auto center aligns none floated divs. overflow: hidden recalculates floated child divs. width: 780px is the total width of the wrappers child divs plus the margin
http://jsfiddle.net/feitla/YjLCe/1/
Wrap a div around it
<div id="AdSales"></div>
<div id="Announcements"></div>
<div id="container">
<div id="Box1"></div>
<div id="Box2"></div>
<div id="Box3"></div>
</div>
And give it a width and position it
#container {
margin:0 auto;
position:relative;
width:950px;
}
<div style="float:left">
<div class="designerWrapper">
<div class="pageBox">
content
</div>
</div>
</div>
<div style="float:left; margin-left:10px;">
content 2
</div>
<div style="clear:both"></div>
<br /><br />
How do I make the div that holds content 2 100% width? If I set it to 100% width it is too wide, at the moment it expands with it's contents length.
you sould use the table stuff
<div id="outer1">
<div id="outer2">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
css:
#outer1 {display:table;width:600px;height:30px;}
#outer2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}
important there is no floating! because the table display floats the cells automatically.
i didnt test the code hope works.
You can set min-width depend upon your requirement.
later on it will expand with its content
<div style="float:left; margin-left:10px;min-width:110px;">
content 2
</div>