Is there a way to place div elements side by side. Right now, it is placed one below another
</div>
<div class="row">
<h4></h4>
<div class="col-sm-12">
<div class="form-group shiny-input-container" style="width: 600px;">
<label class="control-label" id="das-label" for="das">das</label>
<textarea id="das" class="form-control" style="width:width: 100%;;height:100px;">I </textarea>
</div>
</div>
</div>
<div class="row">
<h4></h4>
<div class="col-sm-12">
<div class="form-group shiny-input-container" style="width: 600px;">
<label class="control-label" id="da.-label" for="PAPERCUT SHORT DESC.">da</label>
<textarea id="da" class="form-control" style="width:width: 100%;;height:100px;">Ity</textarea>
</div>
</div>
</div>
Put both of your Columns inside the same Row and then use the following on each of them.
class="col-sm-12 col-md-6"
In Bootstrap, 12 is always full width so 6 is half width. Above says full width on small screens and half width for medium screens and upward.
To align the elements side by side use the flexbox method. Flexbox method helps in the alignment of the div elements. Here I have provided the html code to align div elementsts side by side.
<style>.float-container {
border: 3px solid #fff;
padding: 20px;
display:flex;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
display:inline-block;
margin-right:20px;
flex: 1;
border: 2px solid yellow;
}
</style>
<div class="float-container">
<h4></h4>
<div class="float-child" >
<label class="control-label" id="das-label" for="das">das</label>
<textarea id="das" class="form-control" style="width:width: 100%;;height:100px;">Im </textarea>
</div>
<div class="float-child" >
<label class="control-label" id="da.-label" for="PAPERCUT SHORT DESC." >da</label>
<textarea id="da" class="form-control" style="width:width: 100%;;height:100px;">Ity</textarea>
</div>
</div>
</div>
Related
The generated HTML I have is this:
I put it in Bootply so you can just see and play with it easier, notice it has a small CSS section too:
http://www.bootply.com/NrxiDfZJdC
Problem is it is not "bootstrappy" enough! If you start making the window smaller the labels jump to the right side of the control.
What have I done that has caused this issue?
You have a couple of major problems here.
Right Alignment:
You have set this by adding .text-right on your labels. Obviously this was meant for the desktop view only. Take it off of your labels and use a min-width media query to set the alignment or override the alignment with max-width at small resolutions
Overflowing text boxes:
You didn't use a row. You should most always use a row because it corrects the padding wit negative left and right margins. You tried to fix this yourself by instead adding a class that removes the padding on the .col-sm-4. The padding is there for a reason and should not be removed. Even adding in the row and removing the .multi-row doesn't completely correct the issue, however. When you do that you run into the text inputs being too wide. That is because you added the 100% width to the inputs. This is not a bad thing per se, but it causes problems because you have used spans for your inner columns. spans are naturally collapsed in width. They don't fill their parents' container like divs do. Swap them for divs.
Weird "Ext" label:
This is because you added a margin-left: 85% to the label to simulate the right alignment that the others have. Just remove that margin and add text-right to this label like you have on all the other similar labels.
No padding:
After all that, you'll have no padding on smaller resolutions. Add a .container around your form.
In the end, you should have this: http://www.bootply.com/uiPpBytre3
Demo:
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.form-input{
width :100%;
}
#media(max-width: 768px) {
.form-group .text-right {
text-align: left;
}
}
<div class="container">
<form class="form-horizontal" role="form">
<br>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Name">Name</label></div>
<div class="col-sm-4"><select class="form-control" id="nameadmin" name="nameadmin"><option>77881</option>
<option>77882</option>
<option>77883</option>
<option>77884</option>
<option>77885</option>
</select></div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowEmailInFooter" name="ShowEmailInFooter" type="checkbox" value="true"><input name="ShowEmailInFooter" type="hidden" value="false">
<label class="control-label" for="Show_Email_in_Footer">Show Email in Footer</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px; color: lightblue"></span>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-5"><input class="form-input" id="AdminPhone" name="AdminPhone" type="text" value=""></div>
<div class="col-sm-2 text-right"><label class="control-label" for="Ext">Ext</label></div>
<div class="col-sm-5"><input class="form-input" id="AdminExt" name="AdminExt" type="text" value=""></div>
</div>
</div>
</div>
</form>
</div>
Add responsive text align class text-sm-right instead of text-right
#media (min-width: #screen-sm-min) {
.text-sm-right { text-align: right; }
}
bootply
I have the following html. My label is not aligned vertically in the center compare to the input field.
<div class="row">
<div class="col-sm-5">
<label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
</div>
<div class="col-sm-2">
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
</div>
</div>
How can I set both input and label have the same height ?
JSFiddle
https://jsfiddle.net/mLcrv19z/
To get the two elements (label and input) to align vertically, try using the form-inline class, along with form-group. Here's what that looks like:
<div class="form-inline">
<div class="form-group">
<label for="investmentbalance">Investment Balance</label>
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance" />
</div>
</div>
https://jsfiddle.net/mLcrv19z/10/
You can use both padding or line-height.
Add to label:
padding: 7px;
or:
line-height: 34px;
The input height is 20px; the padding 6 and the margin 1. So here's the calculation:
padding: 6 + 1 = 7px
line-height: 20 + 7 (top) + 7 (bottom) = 34px
You may use margin-top:3%; to the label CSS
The value is based on the jsfiddle example. It may change depending on the application you are developing.
Issue is not with your alignment but the classes you have defined. You need to define bootstrap grid class for every width. Otherwise grid would appear different in different resolutions. Check this out.
<div class="col-sm-10 col-md-10 col-xs-10">
<div class="col-sm-2 col-md-2 col-xs-2">
Fiddle Solution
Another solution is to use a custom class, setting it's line-height equal to the parent's height and aligning it in the middle.
.middle {
vertical-align: middle;
line-height: 34px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row middle">
<div class="col-xs-5">
<label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
</div>
<div class="col-xs-7">
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
</div>
</div>
</div>
I tried to give my form with one email input field and a button which is an image. My button and an input are aligned side by side. I want to center my form in the middle of the bootstrap container class, but nothing that I have tried has worked. I gave my form a width and margin:0 auto, but it didn't help at all.
HTML:
<div class="container">
<div class="text-box-two">
<span id="notification">BE NOTIFIED WHEN WE LAUNCH:</span>
</div>
<form class="well email-form form-inline" id="emailForm" name="sendEmail" novalidate="" method="post">
<div class="col-sm-6">
<div class="form-group">
<input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" "/>
</div>
<div class="form-group button">
<input type="image" src="images/tree.png" name="submitEmail" class="button"/>
</div>
</div>
</form>
</div>
</div>
CSS:
.well.email-form{
background-color: #FFFFFF !important;
border: none !important;
border-radius: 1px !important;
}
#emailForm{
width:1115px;
margin:0 auto;
}
.form-group{
float:left;
}
#emailForm{
margin:0 auto;
}
.form-control{
height:102px;
border-radius:1px;
font-size:30px;
}
Use the Bootstrap framework to do this. Have a look at offsetting columns in the docs.
Try this in your container above.
<div class="container col-sm-8 col-sm-offset-2">
Here's a Fiddle with it working.
I'm having trouble getting a form to display properly. The following two lines are displaying horizontally, but they overlap each other where name ends and email begins. There's no CSS currently implemented on them, I've tried padding-left, margin-left, and a few other tricks but can't get them to separate. Any ideas?
<div id="contact" class="col-xs-6 col-md-6 col-lg-6">
<div class="center hero-unit">
<form action="success.html" method="GET">
<h4> Contact Me </h4>
<div class="form-group">
<div class="col-sm-4 col-md-4 col-lg-4">
<input type="text" placeholder="Name" size="20" id="inline">
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<input type="text" placeholder="Email Address" size="35" id="inline">
</div>
</div>
</form>
</div>
</div>
Including CSS for the hero-unit just in case that's causing issues
.hero-unit {
text-align: center;
background-color: #9C9C9C;
font-size: 11px;
margin: 30px;
padding: 30px;
line-height: 1.4em;
border-color: #C1C1C1;
color: white;
}
Just add to the style:
.hero-input {
padding:5px;
margin: 10px;
display:inline-block;
}
and to the inputs:
class="hero-input"
to have the margin and padding take effect on each input. Obviously you can modify it to your own liking of padding and margins. Basically the margins should either be in the input or the divs containing the inputs. Also you should avoid using duplicate ids. id="inline" should probably be class="inline" and if you use the extra hero-input class, then it could be class="inline hero-input"
I'm trying to create a responsive form, where some things wrap, and others do not.
I would like the form to look like this on desktop
and like this on mobile
Notice that the icon stays to the right. Unfortunately I cannot use a background image for the icon, as I need to show a tooltip on hover of the icon.
When I attempt this, however, the icon wraps:
So, how can I make the icon be its own element (span or div), yet not wrap below the text field?
Here is one attempt: http://jsfiddle.net/XVu6V/
And here is a Bootstrap 3 attempt: http://jsfiddle.net/syhLJ/1/ I'd really like to use Bootstrap.
Here's some HTML:
<div text-element class="form-group row">
<label for="firstName" class="col-md-2 control-label">First Name</label>
<div class="col-md-5">
<input type="text" class="form-control" id="firstName" />
</div>
<div class="col-md-1 validation-icon required"></div>
<div class="col-md-3 validation-message">
Needed for communication.
</div>
</div>
Why not wrap the icon and <input> inside a div, set that div to position:relative and add a padding-right the same width of the icon. Then set the <input> 100% wide and the icon position:absolute;top:0;right:0? That'll force the icon to always sit to the right of the <input>.
Something like http://jsfiddle.net/syhLJ/7/.
You can view just the HTML preview of it at http://fiddle.jshell.net/syhLJ/7/show/, I use this solution quite a bit and it's never failed so far.
You can stack col-xx-xx together without overriding bootstrap's default styles.
http://jsfiddle.net/99SFW/2/
<div class="container">
<form class="form-horizontal" role="form">
<div text-element class="form-group row">
<label for="firstName" class="col-md-2 col-sm-2 col-xs-12 control-label">First Name</label>
<div class="col-md-5 col-sm-5 col-xs-9">
<input type="text" class="form-control" id="firstName" />
</div>
<div class="col-md-1 col-sm-1 col-xs-1 validation-icon required"></div>
<div class="col-md-3 col-sm-12 col-xs-12 validation-message">Needed for communication.</div>
</div>
</form>
</div>
Not really optimal but you could try absolutely positioning the input and floating it to the left when on a smaller screen, while floating the icon to the right. Then I guess make the input a percentage that will give you some spacing between it and the icon.
.form-group .form-control {
position: absolute;
float: left;
}
I've updated your fiddle here
The HTML goes something like this...
<form>
<div>
<label for="firstName" class="label">First Name</label>
<div class="input">
<input type="text" class="form-control" id="firstName" />
</div>
<div class="icon">R</div>
<div class="validation">Needed for communication.</div>
</div>
</form>
And the css
.input {
float: left;
width:calc(100% - 35px);
max-width: 500px;
}
.icon {
float: left;
background-color: orange;
width: 32px;
height: 32px;
display: block;
margin: 0 4px;
text-align: center;
vertical-align: middle;
line-height: 30px;
color: white;
font-weight: bold;
}
.validation {
float: left;
}
Or you could float the button right and drag it up with a negative margin.
.form-group .validation-icon {
float: right;
margin-top: -33px;
}
#media (min-width: 992px) {
.form-group .validation-icon {
float: left;
margin-top: 0;
}
}
.form-control {
width: 90%;
}
http://jsfiddle.net/Anp7s/2/