I'm loving masonry but I have one small glitch: sometimes the width of the masonry container is larger than that of it's parent. Has anyone experienced this before? Under what circumstances does it happen? And how do you solve it?
My site uses isFitWidth and re-does the layout after the browser is resized. The container has auto margins (left and right), so it's centred.
When I slowly reduce the size of my browser I get to the point where horizontal scroll bars show up (and some of the content is out of view), before masonry recalculates and drops a column.
If I check the DOM at this point I find that the width applied to the masonry container element (by masonry) is slightly larger than the size of the parent element. The size of the discrepancies I have seen so far are 8px and 13 px. (It seems to depend in part on the columnWidth and gutter settings).
Note that I am not using percentages for width calculations and there are no images in my content.
I tried several things including:
different browsers
removing unnecessary styling (e.g. padding) from the masonry container
removing unnecessary styling (e.g. drop shadows) from the masonry items
using relative positioning on the container's parent
removing unnecessary styling (e.g. margins) from the container's parent
Any ideas?
Related
I'm building a responsive CSS grid with items whose sizes match a desired aspect ratio. I've tried the padding hack among a few other techniques, but nothing has worked nearly as well for me as using JS to determine the pixel value of 1fr for the desired number of columns and the gap size, and then applying that to the row sizing using repeat(auto-fill, minmax(${width}px, 0)).
Unfortunately, this approach comes with a rather nasty side effect: the parent div (display: grid) doesn't know the height of its own content, so it never sizes correctly. As a result, it's never able to show more than one row of the grid. The rest of the grid items display as a line just below that first row.
To fix this, I've tried setting the height of the parent to 100%, but that covers all of the other content on the page. I've tried using containers to fix the sizing, but haven't had any luck there, either. I've also tried overflow: auto, to no effect. If I could calculate and manually set the height of the parent div in my script, that might work, but I've not been able to find a way to do so (and also seems like a messy approach).
Is there any (good) way to do this? Here's a demo of the issue: https://codepen.io/jmindel/pen/GRoMjEw
when you set the overflow: auto it will make a scroll bar in your element to show all of the content in the specified area. then in this case it won't help you. when you set the height of an element to 100% it's height will be the same as it's parent element. I had this problem before. if you want to set the height of an element you should set the height attribute of all the parents of the parents of your element. you can use % as the unit of height and width if you want your code be responsive and don't want to calculate the exact height of elements and if not you can use other units. try to set height with % unit for all of your parents. it helped me and I am sure it will help you too.
Here's what I wound up doing:
I tried wrapping .grid in another div and styling that wrapper such that it has overflow: scroll, which fixes the height not displaying (100% is fine in this environment--it doesn't cover anything, since it's limited to the height of its block-level parent).
I wrote a script that temporarily sets the grid's height to a very large number, finds the lowest element in the grid, and uses its position to determine the grid's height, which gives it a forced pixel height until the next resize.
A few shortcomings of this approach:
The grid must be contained to a scrollable subcontainer, which works well for my use, but might not for others.
The grid's height should size properly, but didn't without a forced pixel height. min-content and max-content did not work.
My particular problem first occured to me when using with http://mkoryak.github.io/floatThead/
On certain pages I have tables with a of of columns. The client opted for horizontally scrolling these tables. Therefore those tables are wrapped in a div that has overflow-x: auto;
Works nice on desktop browsers and Safari/iOS.
When using floatThead at some point it requests the width of the table with outerWidth() to set the width of the table header when it is floated. On the iPad that floated table header is just as wide as the wrapper element, the rest of it is cropped. I debugged the outerWidth() values of both the container and the table.
On a desktop browser I get values like e.g. 1200px for the container, but 1900px for the much wider table inside of the container.
But in Safari iOS I get 935px for both the container and the table. The container elements doesn't have to be set to scroll larger contents to produce this error. I work with Twitter Bootstrap 2.3.2. If there is a page with a container fluid, its width is adjusted to the window width. If there is a table inside with a larger width, it is visible through overflow: visible;. But – on the iPad – when floatThead is triggered, the floated table headers width gets restricted to the width of the fluid container (minus its padding).
Therefore I presume that the reason for this is a different calculation of the width of bigger elements that are inside smaller containers.
If I understand it correctly, jQuery's outherWidth() uses css() to retreive the width of elements, and css() uses getComputedStyle or currentStyle.
I assume the browser returns the "wrong" with values, and that's all jQuery/floatThead can work with.
And I was wondering if my assumption is correct, or if there could be other factors triggering the "wrong" calculation of the width in Safari iOS.
Apologies for not checking into it any further myself before asking the question. After making a static copy of one of the problematic pages and successively deleting html, javascript and css code I was able to track down the reason.
Twitter Bootstrap 2.3.2 sets max-width: 100&; for table elements. In the said case (table being inside a smaller container that allows for scolling its contents), the table width doesn't need to be restricted in any way.
It didn't cause any problems in desktop browsers. Even in Safari the width of the table itself was fine and scrolling worked. Just jQuery's outerWidth() received a wrong value, which resulted in the floated thead being cropped to the width of the outer container.
I am using the Malihu custom content scroller with automatic scrolling. So far, I basically am experimenting with it. I noticed when I take the height of the scrolling div and use a percentage instead of a fixed amount in px, it expands the div the entire height of the scroll area (off the screen).
I'm literally just taking the code from this GitHub location then opening the file "auto_scrolling_example.html".
Then in the <style> section of the header, I'm simply changing .content: height:500px to .content: height:50%.
Does anyone know why this doesn't work and/or have a good workaround for it?
When you specify the height or width as a percentage, that's a percentage with respect to the element's parent.
If the parent doesn't have any height or width inner children will not work in percentage.
I need to cerate a layout where a div that is the scroll container is absolutely positioned on three sides ( left,right and bottom ) but sizes dynamically with it's sibling container above. Both the scroll container and the sibling are in a fixed dimension container. I have made a jsfiddle which demonstrates my problem.
http://jsfiddle.net/HKu4j/4
If you follow the click instructions there you will see that when you click the top container after clicking the second container it resizes which ideally would push the top of div.myscroll down. This doesn't happen since div.myscroll has top set to 20px; Is there some way with the new CSS3 flexible box layouts to make this work ? I am looking for a solution that uses CSS rather than setting geometry dimensions explicitly with javascipt as I have done in the past.
I'm not sure that this is possible using css alone.
Try this jQuery dynamic width setting example: jQuery/CSS: Set dynamic width by content, avoid inheritance
I have a stack of imgs overlaying one-another which are shown/hidden as needed. For these images to overlap I am forced to use position:absolute(I am fading between them so I need at least two images on-top of one-another at a time). Their container div is floated, but the images' height varies so I cannot set a fixed height on this parent container. I need their container to accurately reflect their height as there is another floated div that clears the container which needs to sit below the image, whatever height it is.
Is there any way of achieving this without using javascript to adjust the height of the container appropriately for each image?
Here is a link to the page as it is at the moment. I am using images with identical heights but I would like to be able to vary the height of the images.
http://www.unwalked.com/
What if you don't make all the child images absolutely positioned, instead only temporarily set position: absolute; to the image that's being faded away? That way the container would naturally resize to fit active image.