Hard to describe, but this codepen should help make things clear.
With my setup, items are very clearly being stacked in the wrong order.
Most items are 33% width, but I have some 50% width items at the top. I am using a spacer item first, to define the correct size.
For some reason, the 50% items are being stacked on top of each other, when there is very clearly room for them to sit side-by-side. It does this even if I reduce their width to, say 45% - where there is very definitely space for them to sit side-by-side.
It appears to be an actual bug with Masonry, and I have logged an issue with them, but have received no response. Can anyone see why this isn't working? Or provide a fix? Or know of a workaround? Thanks!
For reference, here is the code:
<div class="grid">
<div class="grid-item grid-item--sizer"></div>
<div class="grid-item grid-item--width2">1</div>
<div class="grid-item grid-item--width2">2</div>
<div class="grid-item grid-item--width2">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.grid {
background: #EEE;
max-width: 480px;
margin:0 auto;
}
.grid-item {
width: 160px;
height: 120px;
float: left;
}
.grid-item--sizer {
height: 0;
}
.grid-item--width2 {
width: 240px;
}
JS:
$('.grid').masonry({
itemSelector: '.grid-item'
});
I think the Masonry layout is based on a columnWidth parameter, and all the grid elements are supposed to have a width that is a multiple of columnWidth. In your case, that would mean having 80px base columns.
Remove your sizer element (it's not going to be needed), and change your masonry call to:
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 80
});
Related
I am wondering what happens in the 5th div below:
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div> //This one...
...
</div>
The JS is:
.grid-sizer,
.grid-item { width: 22%; }
.gutter-sizer { width: 4%; }
.grid-item--width2 { width: 48%; }
It seems to me that we are setting the width twice - 22% and 48%. Am I understanding that correctly?
This is from the Masonry tutorials:
https://masonry.desandro.com/options.html
The block .grid-item--width2 { width: 48%; } will apply. There can't be "two widths", the later one will take precedence because they have same specificity (you can read about selectors specificity here)
I'm trying to center two progress bars over an HTML canvas element.
I've tried various Bootstrap classes, and CSS changes and I just cant make it work unless I just add to the left bars margin. Any help is appreciated.
HTML
<div class="container">
<div class="row">
<div id="scoreBoardLeft" class="col-xs-6 text-right"></div>
<div id ="scoreBoardRight" class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6 progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
</div>
<div class="col-xs-6 progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
</div>
</div>
<div class="row">
<div id="pong" class="col-xs-12 text-center"></div>
</div>
</div>
CSS
* {
padding: 0; margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
#scoreBoardLeft {
padding-right: 1px;
}
#scoreBoardRight {
padding-left: 1px;
}
#leftScore {
width: 35px !important;
}
#rightScore {
width: 35px !important;
}
.progress {
margin-bottom: 1px !important;
margin-left: auto !important;
margin-right: auto !important;
height: 10px !important;
width: 300px !important;
}
The problem seems to be in that you set:
.progress {
width: 300px !important;
}
The !important flag is overwriting the width:50% for col-xs-6 set by BootStrap.
Simply removing this line seems to fix this problem :)
I've created a fiddle demonstrating this, which can be found here.
Hope this helps!
Edit To Limit Width:
The problem with limiting the width with your current markup is that you would need to set margins on the same class as the Bootstrap column, which would push the elements to the next line with your current HTML markup.
I'd recommend replacing:
<div class="col-xs-6 progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
</div>
With:
<div class="col-xs-6">
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
</div>
</div>
By adding in this new div and changing the structure as above, you could modify the width of .progress as you were trying to do in the first place, and it would have the desired effect :)
I've created a new fiddle, changed this, and given the bars a width of 30% to reflect the change I think you're looking for :)
The new fiddle can be found here.
To solve my issue I had to disable responsiveness within bootstrap. I then set the width of my grid container equal to that of my canvas element.
Boostrap was probably not the best choice since I did not want a responsive grid, lesson learned.
Diable bootstrap responsiveness
This question already has answers here:
CSS Floating Divs At Variable Heights [duplicate]
(10 answers)
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 6 years ago.
this is a problem with white spaces: I have multiple, float:left elements, that I need arranged in 2 columns, and, they all have different heights.
To make it easier, I need the element 3 in the picture, to be right after the element 1. Keeping the padding of course.
I'm 100% using Plain, let's say Vainilla CSS, and AngularJS. I would like to avoid to use any JS modules as the elements are being loaded and re-loaded almost permantly. Most important: 100% need to avoid Jquery.
important update:
Cannot use float:left, float:right approch (if child even or odd):
Float multiple fixed-width / varible-height boxes into 2 columns
important update:
In some cases I do require to apply 2 elements, only, one at the bottom of the other. So I'm looking to apply a property to the element 1.
Use css flex layout with a column direction.
You can read a very good explanation from CSSTricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or use a masonry approach with column css property:
#container {
width: 100%;
max-width: 700px;
margin: 2em auto;
}
.cols {
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
.box {
margin-bottom: 20px;
}
.box.one {
height: 200px;
background-color: #d77575;
}
.box.two {
height: 300px;
background-color: #dcbc4c;
}
.box.three {
background-color: #a3ca3b;
height: 400px;
}
.box.four {
background-color: #3daee3;
height: 500px;
}
.box.five {
background-color: #bb8ed8;
height: 600px;
}
.box.six {
background-color: #baafb1;
height: 200px;
}
<div id="container" class="cols">
<div class="box one"></div>
<div class="box two"></div>
<div class="box one"></div>
<div class="box three"></div>
<div class="box two"></div>
<div class="box five"></div>
<div class="box one"></div>
<div class="box two"></div>
<div class="box six"></div>
<div class="box three"></div>
<div class="box two"></div>
</div>
Note: I am unable to edit the HTML, so I have to find a workaround.
HTML:
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">...</div>
<div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
The issue is that all of the divs inside #container, EXCEPT for #leftColWrapper and #rightColWrapper, need to be 100% width of #container, but #leftColWrapper and #rightColWrapper need to be stacked next to each other and centered (together) within the 100% #container, with a max-width of 1224px.
I tried utilizing the following jQuery to add a wrapper div around #left... and #right..., but it ended up grabbing the ads in those containers and placing them in the component where the JS for the page is stored.
(function($) {
$("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);
I either need another solution to wrap those two divs together, so that I can set a max-width of 1224px and center them, or I need to know why this jQuery is picking up those ads and duplicating them within the JS component.
#container{
text-align: center;
font-size: 0;
}
#container > div{
outline: 1px solid #333;
display: inline-block;
min-height: 10px;
text-align: left;
width: 100%;
font-size: 14px;
}
#container #leftColWrapper, #container #rightColWrapper{
width: 50%;
max-width: 612px;
}
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">width: 50%;<br>
max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br>
max-width: 612px;</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
I'm trying to build this web app thing (it'll eventually a stage/props/que management system for my community theatre group) and I've encountered quite a difficult problem. Apologies if this question has been answered before, I certainly couldn't find anything relating to this specific problem.
Here's the last two I've tried. In theory they have the best chance of working but... they aren't working.
questions/2758651/how-to-change-height-div-on-window-resize
questions/16837525/resize-div-height-with-jquery
So what I'm doing is creating a page that resizes to fit the current screen real-estate the problem I'm having is the central scrolling div and the 'sidebar's' scrolling div only scroll when they have a fixed height. Basically if I use a percentage height in my CSS it becomes the size of it's contents regardless of how overflow: scroll; is setup. I'm thinking it's got something to do with the float:left; definition on all col-*-* elements. The thing I can't fathom is that when I set the div a fixed height (say height:300px;) everything works. Hence why I'm trying JS/JQ solutions but apparently even $(window).height() is getting the document height in Chrome and not the 'viewport' height.
Here's the page as it stands with a fixed height. http://azarel-howard.me/stage-management/props-manager/ I've tried a handful of JS solutions but... they don't seem to run. Or they run into the same issues.
edit: code as requested;
<body>
<!-- Scroll block - this works with fixed height. However I NEED variable height and also WP8 IE support which just flat out doesn't work as I've discovered. (scrolling-wise that is) -->
<div class="scrollable col-lg-9" style="height: 650px; overflow-y: auto;">
<div class="container">
<!-- This scene block get's repeated for each scene -->
<div class="scene row">
<h4>Scene 1</h4>
<div class="container">
<!-- This script block get's repeated for each speakers block within the scene -->
<div class="script row col-lg-offset-1">
<div class="col-lg-2">
<h6>Speaker-1:</h6>
</div>
<div class="col-lg-10">
<p>Speaker's text</p>
</div>
</div>
<!-- End script block -->
</div>
</div>
<!-- End scene block -->
</div>
</div>
<div class="col-lg-3" style="height: 650px;">
<div class="container">
<!-- Scroll block - again this works with fixed height. -->
<div class="row" style="height: 430px; overflow-y: auto; overflow-x: hidden;">
<h5>Stage Props</h5>
<div class="row">
<div class="container">
<div class="col-lg-12">
<h6>Scene 1</h6>
</div>
</div>
</div>
</div>
<!-- Everything from here down is irrelevant for the purpose of figuring out how to have a variable height scrolling div but the presence of these elements will effect to height variables for this specific scrolling div. -->
<div class="row">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_004.jpg" alt>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_005.jpg" alt>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-default" style="width:49%;">Current Que</button>
<button type="button" class="btn btn-default" style="width:49%;">Next Que</button>
</div>
</div>
</div>
</body>
And the CSS for reference: these excerpts are extracted directly from bootstrap.css
.col-lg-9,
.col-lg-3 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-lg-9 {
width: 75%;
}
.col-lg-3 {
width: 25%;
}
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
#media (min-width: 992px) {
.container {
max-width: 970px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
Ok... I just found this which apparently should work I'm trying it now.
HTML5 Canvas 100% Width Height of Viewport?
Ok at long last I've discovered the secret to using height percentages! I'm going to answer my own question (even though I think it's somewhat bad form but anyway).
With percentages of width everything works as expected. If a relative width is defined it is based off of the parent elements width, which unless explicitly assigned, is the size forced on it by the other content inside of it (say a picture that's 200px wide).
Now it doesn't work this way with height. I decided to go back to basics with this one and concentrated on background-color div's to isolate the factor. After a bit I decided a simple google search was in order, and very quickly discovered this forum question from '08 http://forums.htmlhelp.com/index.php?showtopic=7543 and there you go.
In order to use percentage height the height of the parent element MUST be EXPLICITLY defined from the opening HTML tag all the way down to the element where it counts. With the exception of parent elements that have explicit px heights defined.
So for those of us wanting to make 'fullscreen' apps (ie those that are contained within the dimensions of the browser viewport) we need to include the following CSS code.
html, body {
height: 100%;
}
or in my case the div row elements directly under the body also need this applied so
html, body, body > div.row {
height: 100%;
}
and that will make all the difference.
Just remember that from this level down you will still need to include in-line style statements for each and every element that needs to be percentage scaled.
Assuming your HTML is something along the lines of:
<div class="sidebar">
<!-- sidebar content -->
</div>
<div class="main-content">
<!-- main content -->
</div>
You can achieve an independently scrolling sidebar with the following style declarations:
.main-content {
position: relative;
width: 75%;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 25%;
overflow-y: scroll;
}
Here's a jsfiddle example http://jsfiddle.net/7txqj/