<div>
<div style="display:inline-block;">
<div style="display:none"></div>
</div>
</div>
I'm trying to understand this inline-block behaviour. This is a simplified version of a layout issue I ran into with some responsive elements in my header and menu bars. If the intermediate div is anything but inline-block, the entire nested block will have no height (or visibility, I'm not sure). However, if the intermediate div is an inline-block, it appears to display none with the innermost child (it's shaded in Firebug code, so I'm assuming it's hidden), however the the parent div maintains some sort of default height.
The best work-around I've found, which also sheds some light on where the default height is coming from, is to give the outer div a line-height of 0 or 1px. It still shows a 2-3px height which I can live with for my particular design. However, I can imagine cases where this work-around won't work, so it seems a bit like a hack.
I'm interested in understanding why this particular structure is behaving this way. So far, with my tests, it appears to be unique in terms of not collapsing when its children have no display. When understood properly, is it a bug or the logical result of the way the nested displays are interacting? Is there a better way to control it than with line-height? Can it be forced to display no height at all?
I'm not interested in JS solutions, or solutions which suggest work-arounds involving avoiding inline-blocks. Adding CSS to the existing proposed structure is fine. In my mind, the best solution would show no height for the structure with the least consequences for elements displayed inside the structure when display is not set to none. My question is as much theoretical as it is practical.
Is it a bug or the logical result of the way the nested displays are interacting?
Inline elements (inline-block and inline - which both recreate your issue), have white space after them. This has the same effect as a single SPACE U+0020 character, by HTML specifications. This is what causes your parent div to have a height.
Is there a better way to control it than with line-height? Can it be forced to display no height at all?
It depends, really, on what you consider 'better'. You could float the 'middle' element, instead of displaying it inline. (This may require you to clear the floats in the parent element - there is a common fix for this called clearfix)
Here is sample code showing this method in effect:
HTML:
<div class="parent">
<div class="middle">
<div class="final">asdf</div>
</div>
</div>
CSS:
.middle{ float:left; }
.final{ display:none; }
/* Shading to show sizes of divs */
div { border:1px solid; background:rgba(0,0,0,.2); }
/* Clearfix */
.parent:before,
.parent:after {
content: " ";
display: table;
}
.parent:after {
clear: both;
}
Live example: http://jsfiddle.net/16xp2m3L/2/
Related
I'm having trouble making my react app fill the whole screen while being able to size its children properly. Why is it that this works:
<div className="h-screen bg-blue-500">
<div className="h-1/2 bg-red-500"></div>
</div>
and this doesnt:
<div className="min-h-screen bg-blue-500">
<div className="h-1/2 bg-red-500"></div>
</div>
I've looked through the docs and other posts but nothing really touches on this specific problem. Also although h-screen makes it so that the children behave as expected, it doesn't fill the whole screen when there's a need to scroll. I'd appreciate any input, thank you.
This is simply how CSS works. The Tailwind class min-h-screen equates to min-height: 100vh; and the class h-1/2 equates to height: 50%. You cannot use a percentage as a height inside a container that doesn't have an explicit height (i.e., if its height is auto such that it is dependent upon the content inside of it).
The formal definition in the CSS specification says
[t]he percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
One way to work around this is to add the grid class to the parent element. CSS grid containers have intrinsic height and width, so it is possible for your height: 50% child to use the intrinsic height of the grid to calculate its relative height.
This is fine if your container only has a single div such as in your example. However, the empty div will collapse as you add more content in one or more additional children containers.
If that's not the behavior you want, and you always want the one container to be 50% of the parent even if it overflows the min-height, then you can use grid-template-rows: 1fr 1fr (or in the case of Tailwind grid-rows-2 which translates to repeat(2, minmax(0, 1fr))) instead of height on the child:
<div className="min-h-screen bg-blue-500 grid grid-rows-2">
<div className="bg-red-500"></div>
<div>
<p>Add as much or as little content here as you like.</p>
<p>Both child divs will always have the same height of 50% relative to the parent</p>
</div>
</div>
So, previously I was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, I don't want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and ID:
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown#navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown#navigationDropdown {
margin-left: 0 !important;
}
}
So, this seems like it would work perfectly well, but unfortunately, it does not. Doing this makes the website completely disregard any of the CSS, and makes my navbar look all wacky and evenly spaced, as opposed to justifying my links left, and navbar right.
I've found out, through the inspector, that for some reason, the id is being applied to the a element generated by React Bootstrap, not the encompassing div, which is given the proper class.
Any ideas what might be going on?
Any help would be much appreciated, and let me know if I need to provide more info!
Edit:
I tried reformatting my code in the ways specified within this Github discussion, and unfortunately, my issue still remains the same--the ID is assigned to the 'a' element, rather than the dropdown div.
Looks like all i needed to do was surround the dropdown element with a 'div' element and then apply the id to that. There might be some deeper issue at play here, but this fixed my issue.
I am using Angular Material and have been looking at the md-grid-list lately for a design requirement I am trying to solve.
I have a bunch of div's that are children to a container with layout row applied. Each of the child items have set widths\heights and have a toggle button to expand\collapse, which just doubles their sizes on expand and then return to original sizes on collapse.
What I'd like is for the child items to re-order to fill available space (provided that space is big enough) around other items that have been expanded.
Right now the container element for my child items also has layout-wrap applied and so of course as items gets expanded, any children that don't fit horizontally just push down below the previous item.
I have come across md-grid-list but I am not so sure this will provide me with what I am after, as it seems to be more suited for percentage based sizes - or have I got that wrong?
I have seen http://masonry.desandro.com/ where if you resize the window on the homepage, that's the kind of behaviour I am looking for, although I would not want the height\widths to update dynamically.
Can this behaviour be achieved using Angular Material components alone?
I am not sure if I understand you correctly but that is exactly what the grid does?
You just set the column count and width/height ratio. You can also set the height of the rows in pixels. And you can configure it depending on CSS breakpoints.
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="4"
md-row-height-gt-md="{{height ? '100px' : '1:1'}}" md-row-height="100px"
md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile class="gray" md-rowspan="2" md-colspan="2" md-colspan-sm="1">
<md-grid-tile-footer>
<h3>#1: (2r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="green">
<md-grid-tile-footer>
<h3>#2: (1r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
As you can see I added a toggle to switch height between ratio and fixed heigth: md-row-height-gt-md="{{height ? '100px' : '1:1'}}".
Everything is animated by default but you can roll your own animations with angular-animate.
http://codepen.io/kuhnroyal/pen/QyxOQo
I have a problem with aligning text in a single row I tried using Fexl approach as well as other approaches as well
also some of the data in my div is rendered dynamically using ng-repeat
the third column displays special data always.
all the rows from 3 columns should be aligned equally
please help me
link for plnkr http://plnkr.co/edit/LSLktvmvlaQtWUofzJvF?p=preview
I think I understand your question - I ran into a similar problem on another project, and I ended up giving each div a fixed height and setting the overflow to hidden. It takes a bit of testing, but if you're aiming for a responsive design, you can uses Sass to set it to different heights based on screen resolution.
Adding this CSS to your Plunkr would be a good starting point. Of course, you'd want to apply this to a custom class and not '.col-md-6':
.col-md-6 {
height: 100px;
overflow: hidden;
}
Increase the 'height' as needed to make sure all text fits.
this is pretty frustrating...
basically i'm creating a menubar on a site, and have used css sprite to have a hover effect where the image changes as you hover over it. this is working fine, but i can't display multiple images inline because i have to use display:block in the css for the sprite/hover class for it to work.
here is some of the css code i have:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
and then here is the code in the php file (it's part of a wordpress theme, this bit going in the header.php file):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: the image used is a horizontal sprite, so two images merged into one (100x100 turned into 200x100).
this alone works fine, but then when i add something to it like:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
it makes it go to a new line. i thought it may be a padding issue where it's overflowing on the line, but i've tried doing just two images (total area taken up maybe 210px) and it's in a 911px container area and still goes to a new line.
i've tried using < span> tags, tables, inline-block, and several other things but still no success. at one point i got it to stay inline but then the image was placed beneath all the others, in the correct horizontal position but wrong vertical position.
the goal is to have about 8 100x100 images all in a row in the menu bar, with one spacing in between each one, in a container with width 911px. they all will be in the 'x' class so that the image changes when hovered over.
sorry for writing so much but wanted to get it clear. please help!
The divs are rendering as blocks, which is why the images aren't sitting beside eachother.
If I understand what you're trying to achieve correctly, adding a rule
.x { display: inline-block }
will do what you want.
I made a JSFiddle to try it out: http://jsfiddle.net/XZWzW/