Develop Reference

How to automatically adjust divs as per the content inside each div?

I am trying to create number of boxes using div (each div having different number of contents) and each 2 div should be in a row.
But the problem is if one div has more content then it gets bigger than the other one. This creates a space below the other div and the next div comes after that.
i am using angular js ng-repeat for creating all the divs.
The code i used is as below:
<div id="form" ng-controller="JobApplicationFormController">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" ng-repeat="x in categorylist" style="margin-bottom:10px">
<div class="card1">
<div class="container1">
<div style="border-bottom:1px solid #ccc;padding: 5px;margin-left: -16px;margin-right: -16px;font-size:20px !important;color:black">
<img src="~/Images/form.ico" style="height:50px" /> <b>{{x.categoryName}}</b>
</div>
<div ng-repeat="y in formlist" ng-if="y.categoryId==x.id" id="{{y.id}}" onclick="return popitup('../../Applications/Form/' + this.id)" class="formlist" title="click to upload" style="cursor:pointer;padding: 5px;margin-left: -16px;margin-right: -16px;border-bottom:1px solid #ccc;">
{{y.formName}} </font>
{{y.formName}} </font>
</div>
</div>
</div>
</div>
</div>
I've tried this[Auto adjusting div based on inside content for reference but it doesn't works properly. there is overflow of content.
Edit1: I did try this [CSS-only masonry layout but with elements ordered horizontally already but it is not getting me near to anywhere what I want to achieve. the div part is what is causing a lot of trouble.

Plotly chart exceeds Bootstrap grid when resizing Flask Web App

I use bootstrap 3.3.7 for its grid and responsiveness in my web app (Flask App). It works pretty well with all the plotly subplots I created except for a single plot. When the browser is in full-page or if I resize a little bit, I don't have any problem :
However, if I resize too much the plot exceeds the section height and generates a white space.
I have tried to add a margin-right, a padding-right, to change the class of the div col-lg-6 col-md-6 col-sm-6 into col-lg-6 col-md-6 col-sm-6 col-xs-6 (the chart become very very small), to change the margin inside the javascript code that produces the plot...
And as you can see the subplots in the below the GREEKS title are well displayed whatever the resize applied...
Here is the html code for this section :
<section id="payoff" class="background-img">
<!-- Table code here -->
<div class="container-fluid" id="results">
<div class="row" style="padding-top: 0px; padding-bottom: 30px;">
<div class="col-lg-6 col-md-6 col-sm-6" style="padding-top:40px;">
<div class="plotly-graph-div" id="plot-payoff"></div>
</div>
</div>
</div>
</section>
Any help would be really appreciated! Thanks a lot

Packery with Bootstrap Grid

I'm trying to use Packery to build a dashboard with draggable widgets (using Draggabilly for dragging). The widgets have their width determined by Bootstrap classes, as to be responsive over various screen sizes. I'm also using jQuery to grab elements and stuff.
CodePen Link
HTML Snippet
<div class='container'>
<div class='row' id='dashboard-root'>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some content</br></br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some other content<br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Even more content<br><br><br><br>
</div>
<div class='dashboard-item col-xs-12 col-sm-12 col-md-8 col-lg-6'>
Some wide content is super wide, even wider than you even thought possible, like this is so crazy wide you wouldn't believe it.
</div>
</div>
</div>
CSS Snippet
.dashboard-item{
border-style: solid ;
}
.container{
border-style: dashed ;
}
JavaScript Snippet
var $root = $('#dashboard-root') ;
$root.packery({
itemSelector: '.dashboard-item'
});
$root.find('.dashboard-item').each(function(i, itemElem){
var draggie = new Draggabilly(itemElem) ;
$root.packery('bindDraggabillyEvents', draggie);
});
As it stands, the widgets are draggable, but I need them to snap to some sort of grid. Currently, they can be placed anywhere, which makes positioning weird.
I'm trying to figure out how to make them snap to Bootstrap's grid columns. Ideally, I'd want the elements to snap to the nearest col-*-1, I think. Not sure what to do with the height though.
I tried playing with setting the columnWidth to a selector for a dummy element, but I couldn't get it to work.

Bootstrap 3, DevExpress Chart disappears on iPad (iOS 8)

I have a dashboard page that is dynamically built using the Dev Express Dev Extreme dx.charts.js library. I've implemented Bootstrap 3 into the site and everything works great... until I try to view on an iPad. I've spent countless hours making changes to my layout and nothing appears to help. Here's the current code:
<div style="display:none;" id="maindashboard">
<div class="container" >
<div class="row" >
<div class="col-lg-6 col-md-6 col-sm-6" > <%-- left half column --%>
<h1><strong>Container Levels</strong></h1>
<div class="col-lg-6 col-md-6 col-sm-6" id="GuageColumn1"></div>
<div class="col-lg-6 col-md-6 col-sm-6" id="GuageColumn2"></div>
</div>
<div id="PieCharts" class="col-lg-6 col-md-6 col-sm-6" > <%-- right half column --%>
<div class="col-lg-6 col-md-6 col-sm-6" id="pie0" style="height:250px;" ></div>
<div class="col-lg-6 col-md-6 col-sm-6" id="pie1" style="height:250px;" ></div>
<div class="col-lg-6 col-md-6 col-sm-6" id="pie2" style="height:250px;" ></div>
<div class="col-lg-6 col-md-6 col-sm-6" id="pie3" style="height:250px;" ></div>
</div>
<%--<div id="PieCharts" class="col-md-8 col-sm-6" >
</div>--%>
</div>
</div>
</div>
When I view the dashboard on a PC using IE, ChromE, Safari or Firefox, it displays as expected, displaying the pie chart legend. However, when I attempt to view the page on an iPad using either Safari or Chrome, the legend doesn't display. I've examined the page source from both the PC and from the iPad and the only difference in the iPad version is there are a bunch of webkit attributes that have been added to the markup for the legend chart. All the data for the chart is in the markup. Through a lot of testing, I've noticed that if I add a bootstrap column width to the "pie0" object, it doesn't display on the iPad. However, if I remove the column width attribute, the layout looks horrible. I don't know what I'm missing here.
Thanks in advance for any help...

Bootstrap 3 > trying to create columns with equal heights

I've only just started learning so please stick with me and I'll try provide as much info as I can.
Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.
I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)
I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.
Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.
<div class = "container">
<div class="row">
<div id="equalheight">
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
</div>
</div>
Above is my html, the second content area has the large amount of copy
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
Above is my Javascript, calling the before mentioned library.
Thanks for any help / advice

You can try using CSS negative margins (no jQuery needed)..
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
http://bootply.com/92230
EDIT - another option
Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437

Bootstrap team developped a CSS class .row-eq-height which is exactly what you need. See here for more.
Just add this class on your current row like this:
<div class="row row-eq-height">
your columns
</div>
Warning: You have to add a new div.row.row-eq-height each 12 columns

You can use this plugin. It works pretty good.