I have 3 divs in total. One is a container for the other left and right divs. There will be so many containers. Everything is okay now, but when the window is resized the CSS should avoid overlapping the divs. Instead, it should wrap to the next line. Please provide me your suggestion. Below is my code.
Css Code
.divmain
{
width: 100%;
padding: 15px;
height: auto;
}
.divmain .divleft
{
float: left;
width: 16%;
}
.divmain .divright
{
float: left;
width: 84%;
}
View Code
<div style="width: 100%;">
<div class="divmain">
<div class="divleft">
<label class="label">Date</label>
</div>
<div class="divright">
<input type="text"/>
</div>
</div>
<div class="divmain">
<div class="divleft">
<label class="label">Status</label><span class="mand">*</span>
</div>
<div class="divright">
<label class="label">Pending</label>
</div>
</div>
<div class="divmain">
<div class="divleft">
<label class="label">Reference No</label>
</div>
<div class="divright">
<input type="text"/>
</div>
</div>
</div>
Demo
Related
I am trying to create bootstrap grid page with two main sections. one is the app content and the other one is side nav bar.
the nav bar is much shorter the the app content itself. what i am trying to accomplish is that whenever i scroll the page, the app side nav bat will always stick to the top of the page (top, not bottom of it)
my code:
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
whenever i scroll the page, i want to always see on the top right corner the app navbar.
thanks!
this is what solved the issue for me:
<div class="row">
<div class="app-wrapper">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
</div>
</div>
and the css:
.sticky {
position: sticky;
top:0;
z-index: 999;
}
You can try using the overflow: auto for content wrapper only
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8 content">
<div class='col-md-12 wrapper'>
Content
</div>
</div>
<div class="col-sm-4 col-md-4">
Sidebar
</div>
</div>
</div>
.content {
max-height: 100vh;
overflow: auto;
}
.wrapper {
height: 800px;
}
Let me know for more details
Try use fixed
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="nav-sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
And in css:
.nav-sticky{
position: fixed;
top: 0;
height: 100%;
overflow:hidden;
}
Add this property to your app container
min-height:100vh;
max-height:100vh;
overflow:scroll;
Give position:fixed to your row.
Added header to my sample as well.
.app {
min-height: 100vh;
max-height: 100vh;
overflow: auto;
background: red;
color: white;
}
.row {
position: fixed;
width: 100%;
}
.header {
height: 50px;
background: blue;
color: white;
}
.navigator {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 header">HEADER</div>
<div class="col-sm-10">
<div class="col-sm-8 app">
APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>APP CONTENT
</div>
<div class="col-sm-4 navigator">
NAVBAR
</div>
</div>
</div>
</div>
Trying to create a layout that has two columns, and text between those columns
Something like this:
But I am running into spacing issues with twitter bootstrap to make it actually work. On top of making these items the same width with the text between, they should all be vertically aligned.
You can do that using 3 columns
Live Demo jsfiddle
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">.col-sm-6</div>
<div class="col-xs-6">.col-sm-6</div>
</div>
<br/>
<p>Create an account...............................</p>
<div class="row">
<div class="col-xs-6 test" >
<form class="form-horizontal vmid" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password"/>
</div>
</div></form>
</div>
<div class="col-xs-1 test" >
<p class="asd"> ~OR~</p>
</div>
<div class="col-xs-5 test" >
<button type="submit" class="asd btn-primary btn-lg">Facebook</button>
</div>
</div>
</div>
Style
.vmid{
position:relative;
top:50%;
transform:translateY(-50%);
}
.asd{
position:relative;
top:50%;
transform:translateY(-35%);
}
This is not a bootstrap answer just a plain simple CSS one. Although you can adapt it to bootstrap easily because the basic underlying principle is the same. Instead of using width percentages that I have used in my example, bootstrap grid system columns can be used instead. Saying all that, you can achieve your desired effect by dividing the wrapper div into 3 columns and then using the display table for parent and table-cell and vertical align middle for the child to place the respective input elements and button elements in its place as needed.
The fiddle can be found here
The code snippet follows...
.wrapper {
height: 300px;
width: 100%;
background: pink;
}
.leftSide,
.rightSide,
.midPart {
box-sizing: border-box;
height: 100%;
display: table;
}
.leftSide {
width: 45%;
background: lightgray;
float: left;
}
.midPart {
width: 10%;
background: aqua;
}
.midPart p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.leftSide div,
.rightSide div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.rightSide {
width: 45%;
background: lightcyan;
float: right;
}
button {
height: 3em;
width: 100px;
background: blue;
color: white;
}
<div class="wrapper">
<div class="leftSide">
<div>
<input placeholder="Enter Username" />
<br/>
<br/>
<input placeholder="Enter password" />
</div>
</div>
<div class="rightSide">
<div>
<button>Hello</button>
</div>
</div>
<div class="midPart">
<p>-or-</p>
</div>
</div>
Hope this helps. Happy coding :)
Update::
***Another updated Fiddle without colors***
http://www.bootply.com/124116
I have two nested columns but I cannot seem to center their contents inside them. If I get rid of the "float: left", then it splits to two lines which I do not want. What do I need to do to center this? Just to be clear I want to center the contents of cas_subboxA and cas_subboxB which I added borders around.
HTML:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Calculator
</div>
<div class="panel-body">
<form id="cas_form">
<div class="row" id="cas_input_row">
<div class="col-md-6" id="cas_subboxA">
<input class="form-control" id="cas_datepicker" type="text" placeholder="mm/dd/yyyy">
<button class="btn btn-default" id="cas_datebutton" type="button">
<i class="glyphicon glyphicon-calendar"></i>
</button>
<div id="cas_radios">
<input name="operation" type="radio" value="plus">plus<br>
<input name="operation" type="radio" value="minus">minus
</div>
</div>
<div class="col-md-6" id="cas_subboxB">
<input name="daystoaddorsubtract" class="form-control" id="cas_text2" type="number" placeholder="#">
<div id="cas_radios">
<input name="cal_or_work" type="radio" value="calendar">calendar days<br>
<input name="cal_or_work" type="radio" value="work">work days
</div>
</div>
</div>
<div>
<div id="cas_buttons">
<button class="btn btn-success" type="submit"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button>
<button class="btn btn-default" type="reset"><i class="glyphicon glyphicon-remove"></i> Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS:
#cas_form {
margin-top: 20px;
text-align: center;
}
#cas_input_row {
text-align: center;
}
#cas_datepicker {
width: 110px;
float: left;
}
#cas_datebutton {
float: left;
}
#cas_radios {
float: left;
margin-top: -4px;
margin-left: 20px;
height: 40px;
vertical-align: baseline;
text-align: left;
}
#cas_subboxA, #cas_subboxB {
text-align: center;
border: solid 1px;
}
#cas_text2 {
margin-left: 20px;
width: 70px;
float: left;
text-align: center;
}
#cas_buttons {
margin-top: 20px;
text-align: center;
}
Are you trying to center the content's inside your input fields or the panel-heading or both? Try adding a div .text-center center after your .container that'll center the panel heading. You can center the contents of your fields using .text-align: center on your #cas_datepicker hope this helps.
How do you get centered content using Twitter bootstrap?
I am working with an existing system, and am trying to modify the CSS in order to arrange the three columns correctly.
What css changes do I need to make in order to display the third column correctly?
View in this JSFiddle
CSS
.test .repeater {
border: none;
margin: 0;
}
.test .indent1 .wizard-parentcontrol .controlkl {
width: 33%;
float: left;
display: block;
}
.test .wizard-controls .indent1 .control:first-child {
margin-top: 17px;
}
.test .indent1 .wizard-parentcontrol .popupbrowser {
width: 30%;
float: left;
border: 1px solid red;
display: block;
}
HTML
<div class="test wizard-parentcontrol">
<div>
<div>
<fieldset></fieldset>
</div>
<div>
<div>
<fieldset>
<div>
<div class="repeater indent1">
<div class="wizard-parentcontrol">
<div>
<div>
<div class="controlkl">Column 1</div>
</div>
</div>
<div>
<div>
<fieldset>
<div id="p0t2c4dpopupbrowserControl" class="popupbrowser">Column 2</div>
</fieldset>
</div>
<div>
<div class="">
<p class="ctrlinvalidmessage"></p>
<fieldset>
<div id="p0t2c5dpopupbrowserControl" class="popupbrowser">Column 3</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
Check If you can do the following changes.
I just added class
.wizard-parentcontrol div
{
float:left;
}
and removed the hardcoded width's of 33% and 30% from your code.
Check the demo
I have a couple of different issues.
I have a div with a couple of other divs and some controls in it. My biggest issue is that it does not look the same in Chrome as it does in other browsers. As it is right now, it looks as following:
And the biggest issue is with Chrome, where the textbox to the right of the "width:" text goes down onto the next line. The code for the box can be seen in this JSFiddle or as as following:
<div id="div_properties" class="redBorder left" style="clear: left; display:
<div class="right">
<a href="#" id="closePropertiesWindow">
<img src="close.png" title="Close window"></a>
</div>
<div class="centered noMargin whiteBackground">
<h3 class="noMargin">Properties</h3>
</div>
<hr class="noMargin noPadding">
<div id="div_properties_content" style="display: block;">
<div class="noMargin propertiesControl" prop="text" style="width:100%;">
text:
<input type="text" id="propertytextTextBox" class="right"></input>
</div>
<div class="noMargin propertiesControl" prop="width" style="width:100%;">
width:
<input type="number" id="propertywidthNumber" class="right"></input>
</div>
<div class="noMargin propertiesControl" prop="italic" style="width:100%;">
italic:
<input type="checkbox" id="propertyitalicCheckBox" class="right" checked="checked">
</div>
<div class="noMargin propertiesControl" prop="bold" style="width:100%;">
bold:
<input type="checkbox" id="propertyboldCheckBox" class="right">
</div>
<br>
<input type="button" id="savePropertiesButton" value="Save" class="right">
</div>
</div>
And the CSS is as following:
#div_properties {
margin-top: 5px;
background-color: #F0F0F0;
width: 300px;
float: left;
min-height: 75px;
}
.redBorder {
border: 1px solid red;
}
.noMargin {
margin: 0 0 0 0;
}
.left {
float: left;
}
.right {
float: right;
}
(Those are all the related classes in this scope, the other classes defined on the items have no styles, but are being used in the JavaScript.)
Also, another issue I'm having is the "box border" around the close-image in IE. This is not a big issue, but if anyone knows what is causing it, it would be fantastic.
Its the floating that's causing the issue. You need to clear them.
.propertiesControl {
clear:both;
}
http://jsfiddle.net/JWDkM/2/