I am trying to align 7 items in a grid layout so that each element is fixed in it's place currently I am able to achieve like below screenshot. Here is the plunker for the same code (but some how it does not look good on plunker).
The problem in my current state is minutes is wrapped to 2nd line. Also how can I utilise extra space from Agent: label area and Reset button area so that the space gets utilised?
Code
<div class="row">
<div class="col-md-1" style="padding-right:0px; padding-left:0px; margin-top:5px">
<div ng-show="!loadinga">
<b>Agent: </b>
</div>
</div>
<div class="col-md-2" style="padding-left:0px;">
<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-md-2" style="padding-left:0px;">
<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-md-2" style="padding-right: 0px; padding-left:0px;">
<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-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px; margin-right:0px" align="right">
<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-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px;" align="centr">
<input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
<label for="datalabels" style="font-weight:normal;">Show Task Labels</label>
</div>
<div class="col-md-1 divGridImage" ng-show="!loadinga" align="center" style="padding-right: 0px; padding-left:0px;">
<button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
</div>
</div>
Update
Or is there a way to keep Agent: label and drop down in same line without giving separate div with col-md-1 class to label?
Need something like below screenshot
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" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" 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">
<img style="padding-right: 5px" /> Side bar
</li>
<li >
<img style="padding-right: 5px" />Side bar
</li>
<li >
<img style="padding-right: 5px" />Side bar
</li>
<li >
<img style="padding-right: 5px" />Side bar 1
</li>
<li >
<img style="padding-right: 5px" />Side bar 2
</li>
<li >
<img style="padding-right: 5px"/>Side bar 3
</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:
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.
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
Easy but no very attractive solution
<span>minutes</span>
PS: I am not sure I have fully understood your question
Related
I have attempted to place elements below the navigation bar I created, however, it keeps distorting the NavBar. I have used bootstrap so I was hoping I could add a form underneath the code below, it's honestly just an issue of spacing and I have read the bootstrap documentation yet I still find it difficult. The code below is fine but could someone try to add a form or some kind of input box below it, please. Thank you, guys.
<! this is where the nav bar starts to be made>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<!this is the length and theme of the navigation bar is set>
<ul class="navbar-nav pl-2">
<! i've added padding left as i need to space out items in the nav bar well>
<li class="nav-item">
District 1
</li>
<! the home button is the name of the store>
<div class="mx-auto">
<form class="mx-auto order-0 col px-md-5">
<! this is the creation of the search bar>
<div class="mx-auto input-group mt-1">
<div class="input-group-prepend" style="margin-left: 380px; margin-top: 5px;">
<button class="btn btn-outline-secondary" type="button" id="button-addon1"><img
src="https://img.icons8.com/pastel-glyph/2x/search--v2.png" alt="Search" class="mx-auto"
width="20" height="20"></button>
<! this is the image for the search button function>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon"
aria-describedby="button-addon1" style="margin-top: 5px;">
</form>
</div>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item" style="padding-right: 120px;">
<a id="one" href="SignIn.php" class="nav-link" style="font-size: 15px;">Hello, <br> Sign in!</a>
</li>
<! this is the sign in button>
<li class="nav-item mr-5">
<a id="two" href="SignIn.php" class="nav-link"><img
src="https://img.icons8.com/pastel-glyph/2x/shopping-cart--v2.png" alt="Cart" width="40"
height="40"></a>
</li>
<! this is the shopping cart button>
</li>
</ul>
Here are examples of input fields and forms below your nav, is this what you are looking for?
Please see comments in the code to understand better.
Comment if you have more questions.
.flex-c-row {
display:flex;
align-items:center;
margin:25px;
} /* setting the display to flex, which is by default 'row' with items side-by-side; give it align-items:center to align items vertically in the available space */
.flex-c-row > * {
margin:50px; /* space all direct child elements of the outer container by 50px on all sides top bottom right left */
}
.flex-c-col, form {
display:flex;flex-direction:column; /* same as above but set the flexbox direction of elements as a COLUMN so vertical */
}
input {
cursor:pointer;
}
form > * {
margin:25px 0;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<ul class="navbar-nav pl-2">
<li class="nav-item">
District 1
</li>
<div class="mx-auto">
<form class="mx-auto order-0 col px-md-5">
<div class="mx-auto input-group mt-1">
<div class="input-group-prepend" style="margin-left: 380px; margin-top: 5px;">
<button class="btn btn-outline-secondary" type="button" id="button-addon1"><img
src="https://img.icons8.com/pastel-glyph/2x/search--v2.png" alt="Search" class="mx-auto"
width="20" height="20"></button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon"
aria-describedby="button-addon1" style="margin-top: 5px;">
</div>
</form>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item" style="padding-right: 120px;">
<a id="one" href="SignIn.php" class="nav-link" style="font-size: 15px;">Hello, <br> Sign in!</a>
</li>
<li class="nav-item mr-5">
<a id="two" href="SignIn.php" class="nav-link"><img
src="https://img.icons8.com/pastel-glyph/2x/shopping-cart--v2.png" alt="Cart" width="40"
height="40"></a>
</li>
</ul>
</nav>
<!-- so here we simply add the container div for our 3 input examples -->
<div class="flex-c-row">
<div class="flex-c-col">
<span>This is an input field</span>
<input type="datetime-local">
</div>
<div class="">
<form>
<h3>This is a basic form.</h3>
<input>
<input>
<textarea cols="15" rows="25"></textarea>
</div>
<div class="flex-c-col">
<span>This is a color input field.</span>
<input type="color">
</div>
<div>
Codepen to play with:
https://codepen.io/larrytherabbit/pen/pobjKLw
Im working on a section on a webpage, using bootstrap but cant keep filter on same line. Ive tried a few ways, currently trying columns, tried divs inline, still not lining up correctly.
div class="col-lg-12">
<div class="row">
<div class="col-lg-10">
<div class="rev-search" style="overflow: hidden; padding-right:.5em;" >
<input type="text" style="width: 80%;" id="rev-search" placeholder="Search" autofocus="" />
<span><i class="fa fa-search"></i></span>
</div>
</div>
<div class="col-lg-2">
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle" style="float: right;" type="button" id="group_filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><?php echo $text_filter_group;?><span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="group_filter">
<?php
foreach ($customer_groups as $group){
echo '<li>'.$group['name'].'</li>';
}
?>
</ul>
</div>
</div>
</div>
I believe it's because there is padding on the col-lg-10 and col-lg-2. Add this to your css to remove the padding which is pushing your drop down to the next row.
.col-lg-10, .col-lg-2 {
padding: 0;
}
Following the Bootstrap documentation, please use lg (for larger desktops).
Also try wrapping your row in a fluid container.
<div class="container-fluid">
<div class="row">
</div>
</div>
I am trying to understand how bootstrap lays out the divs and why my layout does not render as I expected it to.
I am attempting to use boostrap's grid system to layout out two divs of width 5 columns (w/ the pink background) with a div separating them of width 2 columns (the black line).
When the outermost div shrinks beyond a certain amount, the inner divs no longer all fit contiguously, as shown below. This is not due to the screen size suprassing one of the cuttoffs (i.e. going from medium to small).
Why does this happen? Isn't bootstrap supposed to make sure that the div's shrink proportionally to their column widths?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 text-center filtersectionheader">
Course Level
</div>
</div>
<div class="row">
<!--Left div-->
<div class="col-sm-5" id="randompink">
<div class="row">
<div class="checkbox center-inner">
<label>
<input type="checkbox"> <small id="levelcheckboxtext">Minimum</small>
</label>
</div>
</div>
<div class="row">
<div class="dropdown center-inner">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">2000
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
</div>
<!-- End of Left div-->
<!--Small Black Line-->
<div class="col-sm-2 top45" id="shorthline"></div>
<!--End of Small Black line-->
<!--Right div-->
<div class="col-sm-5" id="randompink">
<div class="row">
<div class="checkbox center-inner">
<label>
<input type="checkbox"><small id="levelcheckboxtext">Maximum</small>
</label>
</div>
</div>
<div class="row">
<div class="dropdown center-inner">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">2000
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
</div>
<!--End of Right Div-->
</div>
</div>
I have a project where a user stores product information and creates articles. On my home view i have two divs. The one on the left is a ng-repeat which retrieves the articles of the products. The one on the right is a ng-repeat also, which shows my product list.
My problem is when i GET my articles, the right one div, breaks the line and shows up on my last result of my article.
this is the position of the right div i want
this is the position of the right div i dont want
here is my home view:
<!DOCTYPE html>
<html>
<head>
<style>
.col-md-4 {
float: right;
}
</style>
</head>
<body>
<br/>
<br/>
<div class="container" ng-controller="HomeCtrl">
<br/>
<div class="row">
<div class="col-md-8" ng-repeat="article in articles" >
<div class="panel panel-white post panel-shadow">
<div class="post-heading">
<div class="pull-left meta">
<div class="title h5">
<b>{{article.title}}</b>
</div><br/>
<ul class="list-unstyled list-inline">
<li><i class="glyphicon glyphicon-calendar"></i> {{article.published}}</li>
<li><i class="glyphicon glyphicon-user"></i> {{article._creatorname}}</li>
<li><button class="btn btn-danger btn-xs" ng-click="remove(article._id)"><span class="glyphicon glyphicon-trash"></span></button></li>
</ul>
</div>
</div>
<div class="post-description">
<p>{{article.body}}</p>
</div>
<div class="post-footer">
<div class="input-group">
<input type="text" id="userComment" ng-model="comment" class="form-control input-sm chat-input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" ng-click="addComment(article._id, comment)"><span class="glyphicon glyphicon-comment"></span> Add Comment</button>
</span>
</div>
<ul class="comments-list">
<li class="comment" ng-repeat="comment in article.comments">
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{comment._commentorname}}</h4>
<h5 class="time">{{comment.date}}</h5>
<div class="pull-right meta">
<button class="btn btn-danger btn-xs" ng-click="removeComment(article._id, comment._id)"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</div>
<p style="width: 350px;">{{comment.content}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<section class="panel panel-default mail-categories">
<div class="panel-heading">
<strong><span class="fa fa-th"></span>
Resources</strong>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="resource in resources">
{{resource.name}}, Model Number: {{resource.modelno}}
</li>
</ul>
</section>
</div>
</div>
</div>
</body>
</html>
I'm using Bootstrap 3. I wish to prevent Bootstrap from changing the styling of the page when the width goes below 768px. The reason is that Bootstrap will stack div rows on top of each other and I don't want that.
Here's what I did:
#media (max-width : 768px) {
.container {
width: 800px;
}
}
It successfully set the container width to 800px but it didn't prevent the styling of the container from being changed (i.e. the elements are still being stacked).
HTML:
<div class="container">
<div class="clearfix inbox-panel row">
<div class="convo-panel col-md-5 col-sm-5 col-xs-5">
<div class="clearfix panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active">Inbox</li>
<li role="presentation">Sent</li>
</ul>
</div>
<!-- List group -->
<ul class="convo-list list-group">
<div class="push"></div>
</ul>
<div class="convo-footer">
<div class="convo-features">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="edit-convo-button btn btn-default">Edit</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="mark-all-read-button btn btn-default">Mark all as read</button>
</div>
</div>
</div>
<div class="convo-options">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="mark-read-button btn btn-default">
<span class="glyphicon glyphicon-ok"></span>
Mark as read
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="delete-convo-button btn btn-default">
<span class="glyphicon glyphicon-trash"></span>
Delete
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="cancel-button btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix chat-panel col-md-7 col-sm-7">
<div class="clearfix chat-header row">
<div class="sender-chat-photo col-lg-1 col-md-1 col-xs-2">
<img class="img-circle" src="/images/no_photo_thumb.png">
<div class="online-indicator"></div>
</div>
<div class="sender-chat-info col-lg-8 col-md-7 col-xs-5">
<p class="truncate list-group-item-heading sender-name">
<span class="vip-label label label-default"></span>
</p>
<p class="truncate small list-group-item-text sender-location"></p>
</div>
<div class="col-lg-3 col-md-4 col-xs-5">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Options </span>
</button>
<ul class="dropdown-menu">
<li>Block user</li>
<li role="separator" class="divider"></li>
<li>Report user</li>
<li role="separator" class="divider"></li>
<li>Delete conversation</li>
</ul>
</div>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
<div class="clearfix chat-box">
</div>
<div class="clearfix chat-input-panel">
<div class="clearfix row">
<div class="chat-input-form col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 form-group">
<textarea class="form-control" rows="4" id="chat-input" placeholder="Type your message here..."><%= current_user.token %></textarea>
<button type="button" class="chat-input-button btn btn-default">Send</button>
<div id="clear" style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="/javascripts/chat.js"></script>
<script>
startChat('<%= current_user.token %>');
</script>
You will chase your tail forever with the method you've tried. Presuming you're not using SASS or LESS where you can set variables before the Bootstrap CSS is generated, try using the Bootstrap Customizer. Go to customizer's breakpoints section and set the #screen-sm variable to a lower value like 650px.