I would like the button to also be inside the div with 'border-blue', but it doesn't. If I remove 'pull-right' from the button's class, it will be in. So, how to keep the button inside the div, and also float it to the right.
http://www.bootply.com/KRnvb6Kk4W
HTML :
<form id="LoginForm">
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center col-lg-3 border-blue">
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div>
<span id="spMsg"></span>
<button type="submit" class="btn-login-base pull-right">
<i class="fa fa-share-square"></i>
</button>
</div>
</div>
</div>
</div>
</form>
CSS :
.border-blue {border:1px solid blue;}
.row-fluid
{
height: 100%;
display:table-cell;
vertical-align: middle;
}
.centering
{
float:none;
margin:0 auto;
padding:0;
}
.btn-login-base
{
width:32px;
height:34px;
padding:0;
background:transparent;
border:none;
}
//bootstrap's .pull-right{float:right !important;}
Add .clearfix class to .border-blue, like this:
<div class="centering text-center col-lg-3 border-blue clearfix">
It will force the container not to collapce because of the inner floated elements.
Related
I have html like
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-inline">
#Html.Kendo().NumericTextBoxFor(m => m.Min).Decimals(2);
#Html.Kendo().NumericTextBoxFor(m => m.Max).Decimals(2);
</div>
</div>
</div>
</div>
Kendo's numeric text box has .k-numerictextbox class. and i have CSS
.form-group .k-numerictextbox {
width: 100% !important;
}
with this settings currently CSS is getting applied to NumericTextBox.
I dont want CSS to apply on NumericTextBox if its under form-inline class
For this specific html structure (there is always one element between .k-numerictextbox and .form-group which either is or not .form-inline) then
.form-group *:not(.form-inline) .k-numerictextbox {
width:100%;
}
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-inline">
<input class="k-numerictextbox" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-not-inline">
<input class="k-numerictextbox" />
</div>
</div>
</div>
</div>
(keep in mind that it is a fragile rule, because if there is yet another container of the .k-numerictextbox inside the .form-group it will not work)
I would remove using !important since it's probably not needed. Add another rule with more specificity (including the .form-inline would be a good way to do this:
.form-group .k-numerictextbox {
width: 100%;
}
.form-group .form-inline .k-numerictextbox {
width: auto;
}
How to make the text input stretch as well when hiding sidebar?
Look at example on jsFIDDLE
html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<div class="jumbotron">
<form role="form" method="post" class="form-inline">
<div class="form-group">
<label for="idf">Name: </label>
<input type="text" class="form-control" id="idf" aria-describedby="h">
<span id="h" class="help-block"></span>
</div>
<div class="form-group" id="tt">
<label for="ida">Tested:</label>
</div>
<div class="form-group" id="cc">
<input type="checkbox" id="ida">
</div>
<div class="form-group" id="bb">
<button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
</div>
<div style="clear: both">/div>
</form>
</div>
</div>
</div>
</div>
css:
.container-fluid .jumbotron {padding: 20px 0 10px 15px}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 3px; height:38px;}
#cc {margin-left: 5px; height:38px}
#bb {margin-right: 20px; float:right}
When you hide the sidebar you will see the content moving to the left. There is one text input and I don't know how to make that input stretch with jumbotron. I'd like to be able set the min width as well.
Second question: is there a better way to make all elements inline and horizontally aligned? I had to separate checkbox from label and do it as you can see.
I found some information in other sources and put it all together. It seems to be working fine. So far nobody was able to answer my question (it isn't that simple), but still if someone knows a better way and cleaner of doing this, I'd like to learn how to do it better. This is what I did:
html:
<div class="jumbotron">
<form role="form" method="post" class="form-inline">
<div id="cell-1">
<label for="idf">Name:</label>
</div>
<div class="form-group" id="cell-2">
<input type="text" class="form-control" id="idf" aria-describedby="h" style="width:100%">
<span id="h" class="help-block">Warning: this field can't be empty!</span>
</div>
<div id="cell-3">
<div class="form-group" id="tt">
<label for="ida">Tested:</label>
</div>
<div class="form-group" id="cc">
<input type="checkbox" id="ida">
</div>
<div class="form-group" id="bb">
<button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
</div>
<div style="clear: both"></div>
</div>
</form>
</div>
css:
.container-fluid .jumbotron {padding: 20px 0 10px 15px}
#cell-1 {display: table-cell; vertical-align:top; padding-top:7px}
#cell-2 {display: table-cell; width:50%; padding-left:5px}
#cell-3 {display: table-cell; width:50%}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 7px; height:38px;}
#cc {margin-left: 5px; padding-top: 4px; height:38px}
#bb {margin-right: 20px; padding-top: 4px; float:right}
.help-block {font-size: 12px;color:red}
Updated example on jsFIDDLE.
I have looked at every possible answers on this subject and for the life of me, cannot get it done.
On this page http://dev.rpgplan.com/contact-us/ I am trying to line up the top 3 fields like this image http://note.io/13eOJi7
but all I am getting is misaligned fields.
In the page you used <br></br> tag between 3 input fields that cause lineBreak so here is what i change and think solve your problem
<div class="wpcf7" id="wpcf7-f352-p353-o1"><form action="/contact-us/#wpcf7-f352-p353-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
...
</div>
<div id="inner-contact">
<span class="wpcf7-form-control-wrap first-name">
<input name="first-name" ... " type="text">
</span>
**[Omit <br></br>]**
<span class="wpcf7-form-control-wrap last-name">
<input name="last-name" ... type="text">
</span>
**[Omit <br></br>]**
<span class="wpcf7-form-control-wrap email">
<input name="email" ... type="email">
</span>
</div>
...
</div>
</form>
</div>
Also i see your first 2 field has margin-top: 6px; and margin-bottom: 20px; property but 3rd field has margin-top: 3px; and margin-bottom: 10px;!
so fix 3rd field's property like two other field and it will be ok.
maybe this will help,
jsFiddle
.small{
border:1px solid black;
float:left;
height:20px;
width:50px;
margin-right:20px;
}
.big
{
border:1px solid black;
float:left;
clear:left;
height:200px;
width:194px;
margin-top:20px;
}
<div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="big"></div>
</div>
You can see in this JSFiddle that the search div is centre aligned, how can I make it align to the top?
HTML:
<div id="wrapper">
<div id="banner">
<a href="#"><h1>Title</h2><br />
<h2>Subtitle</h2></a>
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
</div>
CSS:
#wrapper{
width:85%;
margin:35px auto;
}
#banner{
height:150px;
padding:30px;
padding-bottom:5px;
}
#search{
float:right;
display:inline;
width:38%;
}
#banner h1, #banner h2{
margin:0;padding:0;color:#A2A2A2;display:inline;
}
#banner h1{
font-size:50px;
}
#banner h2{
font-size:35px;
}
You have at least two options. If you want to float the search div to right, move it up in the html code. Now the search div floats right to the elements that are after it in the code. (Note that you had an unclosed div in the original code.)
See the Fiddle
<div id="wrapper">
<div id="banner">
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
<a class="" href="#"><h1>Title</h2><br />
<h2 class="">Subtitle</h2></a>
</div>
</div>
Other option is to make the preceding elements (a and h2) float to the left side of the search div but that doesn't look so good as the search div is not at the right edge of the browser window.
HTML:
<div class="table" style="display:table;width:600px">
<div style="display:table-row">
<div style="width:30%;float:left;display:table-cell">Flow ID</div>
<div style="width:60%;float:right;display:table-cell">
<input type="text" name="flowid" size="20" id="flowid"/>
</div>
<div style="width:10%,float:right;display:table-cell"> [Default : 32] </div>
</div>
<div style="display:table-row">
<div style="width:30%;float:left;display:table-cell">Traffic Class</div>
<div style="width:60%;float:right;display:table-cell">
<input type="text" name="traffic" size="20" id="traffic"/>
</div>
<div style="width:10%;float:right;display:table-cell"> [Default : 0] </div>
</div>
</div>
CSS:
div.table {
font: 81.25%/1 arial,helvetica,sans-serif;
font-weight:bold;
background-color:rgb(241,241,241);
margin: 0 auto;
width: 50%;
text-align:center;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: rgb(229, 229, 229);
}
Output I am getting is :
Why this strange behaviour ?
Althoguh first row seems to be correctly organized but still table-cell elements are not aligned completely to left and right. For second row, I have no clue what's going on ?
I am new in using divs as I used to do all these things with tables so please excuse if missing something trivial.
There is no need for the floats and you also had a typo in one of the inline styles:
width:10%,float:right; should be width:10%;float:right;.
Here is it working:
http://jsfiddle.net/sQ4Nb/
Here is how you should have your code:
http://jsfiddle.net/cS35y/
And here is a HTML table version:
http://jsfiddle.net/53fKu/
Why do you use div elements if you decide to display them like a table?
You may try something like this: jsfiddle
<ul id="wrapper">
<li>
<div style="width:30%;" class="cell">Flow ID</div>
<div style="width:55%;" class="cell">
<input type="text" name="flowid" size="20" id="flowid" />
</div>
<div style="width:15%;" class="cell">[Default : 32]</div>
</li>
<li>
<div style="width:30%;" class="cell">Traffic Class</div>
<div style="width:55%;" class="cell">
<input type="text" name="traffic" size="20" id="traffic" />
</div>
<div style="width:15%;" class="cell">[Default : 0]</div>
</li>
</ul>
#wrapper {
width: 600px;
list-style: none;
}
.cell {
float: left;
}