I am using bootstrap for grid.
When the an column is expanded the other columns which are on right are aligning properly but the elements which are left to it are not aligning properly.
<div class="row">
<div class="repeater" ng-repeat="student in students | filter : query">
<div class="span{{12/columns}} col-sm-6 panel panel-warning">
<div class="panel-body">
<div class="row">
<div class="col-md-5"><img ng-src = "img/{{student.img}}" width="80px;" class="img-circle"></div>
<div class="col-md-7">
<button class="btn btn-info" style="margin-top:20px;" ng-click="show=!show">{{student.name}}</button>
<button type="button" class="close pull-right" ng-click="remove(student)">× </button>
</div>
</div>
<table class="table table-striped table-hover" ng-show="show">
<tr><th style="padding-right:0px;">Father Name:</th><td>{{student.fathername}}</td> </tr>
<tr><th>Class: </th><td>{{student.class}}</td></tr>
<tr><th>Subj1: </th><td>{{student.results.subj1}}</td></tr>
<tr><th>subj2: </th><td>{{student.results.subj2}}</td></tr>
<tr><th>subj3: </th><td>{{student.results.subj3}}</td></tr>
<tr><th>subj4: </th><td>{{student.results.subj4}}</td></tr>
</table>
</div>
</div>
</div>
</div>
Here is the fiddle link view in fullscreen view.
I want all the elements in the grid to align properly without leaving any place.
Can anyone help me?
This is not entirely possible with bootstrap. To explain you why, the .col-md-4 class has css property float: left which means whenever you open the right-most box, the left-side elements takes the height of the right-box, thus not allowing any other boxes below it.
You could get it working for the left and right elements by giving float:right for every last element in the row (in your case using .col-md-4:nth-child(3n){ float:right; }) like in the demo here but the middle element cannot be helped because it is still under float:left.
For your requirement, I recommend you use a JS library like Masonry which does exactly what you are expecting and used in cases where containers have variable heights and you want to fix them tightly, leaving no gap.
Here is what you are looking for: http://jsfiddle.net/ewNc6/
The trick is to insert a 'clear:both' on the first of each row.
<div class="col-md-4" ng-repeat="student in students" style="{{$index % 3 == 0 && 'clear:both'}}">
This normally will tie the code to the number of rows, but then again so does <div class="col-md-4" ,so you might be ok when doing so.
Related
I'm trying to achieve masonry for my panels. This is how it looks currently:
I'd like it to fill the gaps whenever it's possible. I've tried using flexbox but it behave like there was 1 row and after adding more panels it just made them smaller. I also tried using column-countproperty but my panels were separated (panel heading from panel body. blue and white) unless there were as many elements in a row as there were columns (i.e. column-count: 4looked good only if number of panels was multiplicity of 4). Here's how my panel code looks:
<div class="container-fluid">
<div class="col-md-3 ng-cloak" ng-repeat="card in vm.cards" style="margin-bottom: 10px;">
<div class="panel panel-info" style="min-width:235px;">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">{{ card.question }}</h4>
<div class="btn-group pull-right">
Manage
</div>
</div>
<div class="panel-body">
{{ card.answer }}
</div>
</div>
</div>
</div>
Here's the exact page in my repository: Github Reposiory
Also here's the working page: http://188.166.160.66/App/Demo
I'd like to achieve this with css, but if it's impossible I'll give js a shot.
If more screenshots are required I can provide them.
#Edit: I want to prevent my site from having horizontal scrolling.
I have a div with id=group1port.
Inside this div are multiple divs, one being id group1porteq.
I am using the equal heights to make the div's the same height however, with what I have, it currently changes the heights of all the div's, when I only want it to effect the div group1porteq. I have tried ('#group1port div.group1porteq') but this doesn't work. I have also tried removing the "div" completely and that also doesn't work. Also have tried changing it to ('#group1porteq div') and then that just makes all the div's inside that div equal.
The "div class="portlet light bordered" id="group1porteq"" is the two div's i need to have equal height
I have div's that all have multiple div's inside, and I am trying to just get equal height for 1 div. Here is a sample of the script.
<script>
if($(window).width() > 800){
$('#group1port div').equalHeights();
}
</script>
Here is a sample of the code
<div class="row" id="group1port">
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
</div>
I'm not sure I fully understand what div's you're trying to find, but this find's both 'group1porteq' divs nested within the 'group1port' div.
$('#group1port').find('#group1porteq').each(function() {
// Do equal height stuff
});
I don't know what equalHeights(), but it sounds like your issues are all related to the selectors. You can find a full list of selector options here https://api.jquery.com/category/selectors/
You have a duplicate id: id="group1porteq" on two divs. You cannot have an id be the same on a page. Try changing it to a class as a first step. Can you add some CSS to this bit of code? it would seem that you are trying to break a table apart. Try adding "display: block" to the class: class="group1porteq" once you change that and see if it breaks the table model so you can get individual heights again.
I am new to web development, particularly CSS and Bootstrap. I am struggling to center the set of 5 items in a Bootstrap row. Here is what I have:
<div class="container-fluid">
<div class="row text-center" style="border:2px solid green">
<div style="display:inline-block;float:none;vertical-align:top;margin-top:8px">My Label</div>
<div class="col-xs-2 col-sm-2 col-md-1"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button1</button>
</div>
<div class="col-xs-3 col-sm-3 col-md-2"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button2</button>
</div>
</div>
</div>
For the most part, it gives me the result I want in Firefox and Chrome. The controls are spaced a little and it is responsive -- the white space shrinks while the controls grow (in % of screen) as the screen gets smaller. Control widths are controlled via Bootstrap col-*-# classes. Though, IE seems to align the buttons at the bottom of the row for some reason. I'm not sure why.
Aside from defining custom CSS classes instead of style attributes, is this the correct/best way to achieve the result that I want? Or, is there a better way to do this in CSS or Bootstrap? It seems hackish to have to use vertical-align and margin to get the label to line up. Also, I started out using form elements and classes. But, that kept making things worse. What is the benefit of using the form element or downside to not using it?
I read numerous similar posts. But they all seemed to have something different enough that the solutions seemed to not fit what I am doing. I have a set of controls that I want centered as a unit. I do not want to simply snap them to the 12-column Bootstrap grid.
JSFiddle
You still can use a custom class when you need it :
.classname {
display: inline-block;
vertical-align: middle;
float: none;
}
I have the following dhtml skeleton
<div class="content">
<div class="container">
<div class="pull-right">
<a class="btn btn-primary" href="#">Press me</a>
</div>
<table class="table table-condensed table-bordered">
</table>
</div>
</div>
I want table to be centered on the page. I am using latest version of bootstrap. My table is a very large width table. Sizes of the divs as this is shown on my chrome dev console are.
.content: 1583x3803
.container: 1170x3803 (with 206.5 margin left and right)
.table: 1334x3753
So I see that my table needs more space than the container has. I thought that container centers the divs according to their size. Is there a way to make my table no matter it's width to always center inside a div?
I have tried using the row class but it was not solving the problem. I am just trying to take two divs and put them next to each other using only bootstrap and not css. (It's a corner case where I can't add any css) Is there a way to do this?
Basically I have this:
<div class="OuterMostClass row">
<div class="outerClass">
<button class="btn">button1</button>
</div>
<div class="outerClass2">
<button class="btn">button2</button>
</div>
</div>
And I want the two buttons to be next to each other and due to limitations I can't add any css other than bootstrap. Is this possible?
Your code sample doesn't show a parent div with the container or container-fluid class and your columns are missing size classes.
Try this:
<div class="container">
<div class="OuterMostClass row">
<div class="outerClass col-xs-6">
<button class="btn">button1</button>
</div>
<div class="outerClass2 col-xs-6">
<button class="btn">button2</button>
</div>
</div>
</div>
The answer is to add the pull-left class to the buttons but as Matthew points out adding a container makes it easier to take care of other spacing