I have a grid container div (display: grid) which is inside a full height (flex) parent:
.scss file
.parent { /* this layout is full height */
display: flex:
flex-direction: column;
.layout-grid {
flex: 1; /* this makes my grid to take all available height of parent */
display: grid;
grid-template-columns: 20% 1fr;
grid-template-rows: 1fr;
grid-template-areas:
"left main"
"left main";
}
.left { /* this child is not full height*/
grid-area: left;
}
.main { /* this child is not full height */
grid-area: main;
}
}
.tsx file
<div className='parent'>
<div className='layout-grid'>
<div className='left'> Left </div>
<div className='main'> Main </div>
</div>
</div>
Here is the result:
The outer blue border is .layout-grid (display: grid) which is properly full height.
But I can't get the children of my grid to extend full height even if the grid is properly full height. I have tried justify-items: stretch with no success.
But if I give the .layout-grid a specific, defined height, not flex:1 nor height: 100% but a specific value (e.g height: 90vh), then children content expand to full height.
Is this the way css grid is supposed to work? (in other words: in order for children to take up full height, the grid parent container should have a specific value (not flex:1 or %) )? or there is a mistake somewhere in my style?
Related
I am asking about this behavior. Elements inside a flexbox assume certain width according to their contents. So if we put an element (let’s call this the “child”) inside an element (and let’s call this the “parent”) put in a flexbox (we’ll just refer to this as the “flexbox”) and give the child a padding in pixels ,then the parent will be upsized according to the increase in the content of the child element. But surprisingly this is not the case when we use padding in percentages (we see the parent width stays the same and the child is pushed of the parent, it is like the padding is put on the inside of the parent element like we have used the rule of (box-sizing: border-box) and determined the width of the parent, but we didn’t). Why is this the case???
This is the HTML:
<div class="flexbox">
<div class="parent">
<div class="child">Hello World!</div>
</div>
</div>
This is the CSS:
.flexbox {
background: #EEE;
display: flex;
}
.parent {
background-color: red;
color: white;
}
.child {
padding: 5%;
}
I am unsing the application layout in an application where there is no footer. Is there a way to get the lotusColLeft (or/and lotusColRight) to be the same length as the lotusContent div? The users are complaining a bit on the fact that the left menu's background color doesn't go all the way to the bottom of the page.
You can use Firebug or some other CS debugger to see the CSS for the left pane and the content pane and see if you can tweak the CSS (maybe try 100% for the height).
You may end up having to get the height of the content div and then set the left div to the same height in CSJS onClientLoad. You will also have to use the same code in a window resize event in case the user changes the browser window size.
Howard
OK, here is how I finally made this happen: I used a background image. Not ideal, I agree, but less problemeatic than the original solution (at the bottom of this answer):
.lotusContent {
background: url(leftColBkgd.png) repeat-y;
}
.lotusColLeft {
background-color: grey;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
Original solution:
.lotusColLeft {
background-color: grey;
min-height:2048px;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
I'm using masonry layout in WordPress so my local site's masonry layout is put together with loops. I've created a fiddle to explain my question.
How do I control the positioning of one item within a masonry layout?
I want a div to always be at the top right of the masonry container (to the right of my top left corner stamp)
How do I override the positioning that masonry assigns its .box items?
#container { max-width:635px; width:100%; }
.corner-stamp { background:gray; width: 90px; height: 90px; }
.box {
width: 90px;
height: 90px;
margin: 5px;
background: #6AD;
float: left;
}
/* I want to freely position this item with css */
#biggerBlock{
width: 395px;
height: 200px;
background: #6AD;
left:25%; /* overidden by masonry */
}
.box.large {
background: #084;
z-index: 2;
}
UPDATE:
David Desandro answered the question on the official Masonry Git page. The new isotope v2 will have this feature with the ability to include 2 corner-stamps. Thanks for the downvote.
There is no cornerStampSelector property in pure masonry now. You can use stamp option:
Specifies which elements are stamped within the layout. These are
special layout elements which will not be laid out by Masonry. Rather,
Masonry will layout item elements below stamped elements.
$container.masonry({
columnWidth: 100,
animate: true,
stamp: '#biggerBlock'
});
And stamp method:
Stamp the elements in the layout. Masonry will lay out item elements
around stamped elements.
$container.masonry('stamp',$('#biggerBlock'));
Goal:
When the width and height of the window are both small, the div should be the same size as the window;
When the width of the window is too big (>max-width), the div should keep its width as max-width, and be horizontally centered.
When the height of the window is too big (>max-height), the div should keep its height as max-height, and be vertically centered.
The example below has achieved everything, except for the last point.
How to center this div vertically in the window? I.e., I want the red areas to behave like the green ones, but just vertically instead of horizontally.
(This design is intended for a responsive design for mobile devices' screens. No JS involvement if possible.)
<!doctype html>
<html>
<head>
<style>
body,html{
height:100%;
margin:0px;
background:green;
}
#t1{
position:relative;
height:100%;
max-width:640px;
margin:0 auto;
background-color:red;
}
#t1-1{
position:absolute;
height:100%;
max-height:640px;
width:100%;
background-color:#dddddd;
overflow:hidden;/*demo purpose*/
}
/*the following stuff are for demo only*/
img{
position:absolute;
opacity:0.5;
}
img.w{
width:100%;
}
img.h{
height:100%;
}
</style>
</head>
<body>
<div id="t1">
<div id="t1-1">
<img class="h" src="http://www.google.com/images/srpr/logo3w.png" />
<img class="w" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
</div>
</body>
</html>
P.S. In this example, some desktop browsers internally set a min-width value to the whole thing (e.g. 400px in Chrome), unabling the div to keep shrinking horizontally.
You may need a little javascript to make it work:
First of all, you need an <div> element to layout, so I called it mask:
<div id="mask"></div>
Then, style it to fill the entire document, and give a max-width and max-height:
<style>
#mask {
position: fixed;
height: 100%;
max-height: 400px;
width: 100%;
max-width: 400px;
top: 0;
left: 0;
background: red;
}
</style>
This style do not perform the centering work, so you need your javascript to do it, we have a layoutMask function to determine if the div should be centered or not:
var mask = document.getElementById('mask');
function layoutMask() {
// here 400 is the same as the max-width style property
if (window.innerWidth >= 400) {
mask.style.left = '50%';
// to ensure centering, this sould be (max-width / 2)
mask.style.marginLeft = '-200px';
}
else {
mask.style.left = '';
mask.style.marginLeft = '';
}
// the same as width
if (window.innerHeight >= 400) {
mask.style.top = '50%';
mask.style.marginTop = '-200px';
}
else {
mask.style.top = '';
mask.style.marginTop = '';
}
}
At last, assign this function to the resize event, and execute immediately to ensure the <div> got layed correctly on first load:
if (window.addEventListener) {
window.addEventListener('resize', layoutMask);
}
else {
window.attachEvent('onresize', layoutMask);
}
layoutMask();
I tried this on my chrome, but I'm sure it does not work under IE6 since IE6 doesn't support the position: fixed; style, but it should work in most browsers.
I've made a jsfiddle for test.
As per my knowledge, with height:100% it is not possible. You need to use <center> to keep it in center horizontally and vertically. You may need to use margins also. Like:
margin-top:18%;
margin-left:40%;
You can add a #media query to achieve this effect
#media (min-height: 640px) {
#t1-1 {
top: 50%;
margin-top: -320px;
}
}
See JSFiddle for testing.
I'm trying to display a sidebar on the left side of a google map. The sidebar width is 380px and I need the map canvas div to take up the remaining width but I have no luck so far accomplishing this.
The map div must have width and height declared, otherwise it doesn't work.
I was trying to find a width 100% minus X pixels solution but no of them is working in this case.
Does anyone has an idea how to do it?
Thanks.
I tried this, but it looks that it doesn't apply to the map canvas div:
$(document).ready(function(){
$(window).width();
$(document).width();
var width1 = $(document).width();
var width2 = $("#left").width();
var canvas_width = width1 – width2 + "px";
$('#map_canvas').width = canvas_width;
});
I had exactly the same problem, but managed to fix it.
For example, if your sidebar div is 200px wide set an extra div container around the div in which Google Maps writes its content.
For that div-container set
position: absolute;
left: 200px;
right: 0;
height: 100%
Works like a charm, also when resizing. Let me know if this solution doesn't match your situation.
I am doing this (also sidebar + GM) with relative width and min-widths. I can toggle the sidebar visible / invisible. In order to save the original values see: Getting values of global stylesheet in jQuery ).
Btw, I think you assignment in js is wrong, it should be element.**style**.width or in jQuery $("#id").width(value):
How to set width of a div in percent in JavaScript?
The styles:
#sideBar {
float: left;
width: 27.5%;
min-width: 275px;
height: 100%;
z-index: 0;
}
#sideBarLocation div {
display: inline;
}
#mapCanvas
{
width: 72.5%;
min-width: 725px;
height: 100%;
float: left;
z-index: 0;
}
with HTML:
<div id="sideBar">
<!-- tab location starts here -->
<table id="sideBarLocation" class="sideBarStandard">
...
</table>
</div>
....
<!-- side bar ends here -->
<div id="mapCanvas"></div>