Need Help In Aligning Items Together In Bootstrap Grid Layout
Solution 1:
Right so my attempts at solving this are below, I'm not going to give you the same body of text because you can review that in the previous post.
Here is the completed grid with all the parts you have requested, it's also laid out better. (Its not really device friendly as requested).
I updated the example to work correctly
Code:
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js@1.x" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-2 sidebar">
<div class="sidebar-nav" style="height:100% !important;min-height: 100% !important">
<div class="navbar navbar-custom" role="navigation">
<ul class="nav recommendation-nav">
<li class="active">
<a href="#/"><img style="padding-right: 5px" /> Side bar</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px" />Side bar</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px" />Side bar</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px" />Side bar 1</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px" />Side bar 2</a>
</li>
<li >
<a href="#/"><img style="padding-right: 5px"/>Side bar 3</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-sm-offset-1 report-area">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-2">
<div class="dropdown" ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-2">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-2">
<div ng-show="!loadinga">
<input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text"
ng-blur="" />
</div>
</div>
<div class="col-xs-12 col-sm-4 divGridText" ng-show="!loadinga">
<input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
<label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running < </label>
<input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
</div>
<div class="col-xs-12 col-sm-1 divGridText" style="width:9.33%" ng-show="!loadinga" >
<input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
<label for="datalabels" style="font-weight:normal;">Task Labels</label>
</div>
<div class="col-xs-1 col-sm-1 divGridImage" ng-show="!loadinga">
<button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Preview:
Solution 2:
Your parent divs (the columns) should be set to 0 padding and 0 margin, and the childs should have whatever padding/margin you want. This prevents an overflow.
For example, if you have 4 columns (which equal to 25% width each) and even one of them has a left or right padding of like 10px, then the 4th column will be pushed to the next line because they are now exceeding the 100% width.
Bad example:
HTML:
<div class="col-1">
//content
</div>
<div class="col-2">
//content
</div>
CSS:
.col-1, .col-2 { width: 50%; display: inline-block; padding-left: 15px }
The above code will have the second column flow to the next line because of that padding-left of 15px, which you also use in your own code.
Good example:
HTML:
<div class="col-1">
<div class="inner-col-1">
//content
</div>
</div>
<div class="col-2">
<div class="inner-col-2">
//content
</div>
</div>
CSS:
.col-1, .col-2 { width: 50%; display: inline-block }
.inner-col-1, .inner-col-2 { padding: 0 15px }
The above code will ensure that your columns are on the same line, and the inner content can now use whatever padding/margins you want because they won't affect the width of the parents.
Solution 3:
If you don't need to use the application on another screen size, you could try to align Agent: to the right of his container and the reset button to the left of the container. You could the set negative margins to the row, that would give you more place for your content.
Otherwise, bootstrap gives you the possibility to subdivise each column into 12 new columns, you could try something like this :
<div class="row">
<div class="col-md-6">
<!-- you can put here the 4 first elements as you like, on a 12 columns layout -->
</div>
<div class="col-md-6">
<!-- you have again a 12 columns layout for the 3 lasts elements -->
</div>
</div>
look at http://getbootstrap.com/examples/grid/ in the section "Two columns with two nested columns" for a visual example
Solution 4:
Easy but no very attractive solution
<span>minutes</span>
PS: I am not sure I have fully understood your question
Post a Comment for "Need Help In Aligning Items Together In Bootstrap Grid Layout"