does anyone know how to Inline an input and a div within a table cell?
this is the code:
<td>
<div class="input-group">
<input type="text" data-tier-id="1" class="form-control notes" value="2.829%">
<div class="input-group-addon">%</div>
</div>
</td>
This is very simple. Just add the following CSS code:
.form-control,.input-group-addon {
display: inline;
}
<td>
<div class="input-group">
<input type="text" data-tier-id="1" class="form-control notes" value="2.829%">
<div class="input-group-addon">%</div>
</div>
</td>
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Hope this helps!
It seems that you are adding a title for the input, in which case I would recommend using a <label> tag instead of <div>.
<td>
<div class="input-group">
<label><input type="text" data-tier-id="1" class="form-control notes" value="2.829%">%</label>
</div>
</td>
Otherwise..
CSS:
.form-control notes, .input-group-addon {
display: inline-block;
}
HTML:
<td>
<div class="input-group">
<input type="text" data-tier-id="1" class="form-control notes" value="2.829%">
<div class="input-group-addon">%</div>
</div>
</td>
Related
My current code is :
<div class="row" id="loginForm">
<p>Username : </p>
<input type="text" class="form-control input" id="usr">
</div>
This shows the input box in the next line, how can i display the p tag and the input box on the same line?
Paragraphs are usually displayed as a block of their own.
While you can change the styling of it to change that, what you have is not a paragraph, so you shouldn't mark it up with the p element.
Use a label element instead. Aside from being the correct markup, it is an inline element so will render on the same line by default.
<div class="row" id="loginForm">
<label for="usr">Username : </label>
<input type="text" class="form-control input" id="usr">
</div>
display: inline-block is your friend:
p {
display: inline-block;
}
<div class="row" id="loginForm">
<p>Username:</p>
<input type="text" class="form-control input" id="usr">
</div>
You can use table without border. So it looks very tasteful and easy.
<div class="row" id="loginForm">
<table border="0">
<tr>
<td><p>Username : </p></td>
<td><input type="text" class="form-control input" id="usr"></td>
</tr>
</table>
</div>
Use Bootstrap form-horizontal
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="usr">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control input" id="usr">
</div>
</div>
</form>
You can simply wrap your input into tag so you don't need to use for attribute.
HTML:
<div class="row" id="loginForm">
<label
>Username :
<input type="text" class="form-control input" id="usr">
</label>
</div>
CSS:
label {
display: block;
}
label > p {
display: inline-block;
}
You could just use a span tag,
<div class="row" id="loginForm">
<p>Username : <span><input type="text" class="form-control input" id="usr"></span></p>
</div>
with boostrap you only add class form-horizontal and this work for you
Why does my Bootstrap input not align right (=> see 3rd input with placeholder='Does not align right')?
The td table element has a style which defines the alignment...
When I remove the style element from the td element at set the input style text-align=right, it is still left aligned.
<div class="row">
<div class="col-md-6">
<div class="well" style="width:840px">
<table class='table borderless' style="width:800px">
<tr>
<td colspan="2">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
</td>
</tr>
<tr>
</table>
</div>
</div>
</div>
Why does my Bootstrap input not align right?
Because .form-control will have display: block from bootstrap.min.css. As proof of this, if you make it an inline-block again it'll work:
.form-control { display: inline-block !important; }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="well" style="width:840px">
<table class='table borderless' style="width:800px">
<tr>
<td colspan="2">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
</td>
</tr>
<tr>
</table>
</div>
</div>
</div>
What you probably really want is your controls to behave like that straight away. To do so make sure to utilize Bootstrap's form-inline, e.g. like this:
<div class="row form-inline">
Note that this affects the first row of inputs too. If you move the form-inline to a another spot you could choose to prevent that from happening.
That's because your input has it's display property set to block via the .form-control class. Block level elements will take up the whole width of their containing element. Even if a width is set, the remaining space is taken up by margin.
To get the input to align the way you would like change the display value to inline-block or add the class .pull-right to the input.
.form-control {
display: inline-block;
}
<input type="text" class="form-control input-sm pull-right">
Twitter Bootstrap specially set width: 100% property to the .form-control to make the life easier and handle such things with Grid system
You can go with the following solution
HTML Markup
<div class="row">
<div class="col-md-9 is-centered">
<div class="well well-form">
<!-- Two inline input fields per row -->
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control input-sm" type="text" name="input1" placeholder="Input 1">
</div>
<div class="col-sm-6 form-group">
<input class="form-control input-sm" type="text" name="input2" placeholder="Input 2">
</div>
</div>
<div class="row has-border">
<div class="col-sm-12">
<!-- Single input fields per row (pushed to the right) -->
<div class="row">
<div class="col-sm-6 pull-right">
<input class="form-control input-sm" type="text" name="input3" placeholder="align to right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Helpers (optional)
SCSS
[class*="col-"] {
&.is-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
}
.well-form {
> .row {
padding-top: 8px;
border-top: 1px solid #ddd;
}
.form-group {
margin-bottom: 8px;
}
}
CSS
[class*="col-"].is-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
.well-form > .row {
padding-top: 8px;
border-top: 1px solid #ddd;
}
.well-form .form-group {
margin-bottom: 8px;
}
DEMO
Couple of things to notice:
<table> is not a good approach in this case
inline style=" to HTML tags is not good at all (even if its a demo)
Hope this helps
<form class="form-inline">
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control hello" type="text"/>
</div>
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control" type="text"/>
</div>
<input type="submit" class="btn" value="submit"/>
</form>
How would I make the middle input have a width of 500px? I tried wrapping it in a row with col-xs-10, but that also didn't work. Here is a jsfiddle demo.
The following CSS rule would work:
.form-inline .form-control.hello {
display: inline-block;
width:500px;
}
JS Fiddle: http://jsfiddle.net/uvdU8/3/
The simplest solution would probably be to add style="width:500px;" to the input.
Updated JSFiddle: http://jsfiddle.net/ThomasMcNaught/uvdU8/1/
If you want it to be applied through CSS then try an ID.
input#width {
width: 500px;
}
Demo: http://jsfiddle.net/ThomasMcNaught/uvdU8/2/
How can i get the element the "keys_values" div next to the text box..i.e, all the elements inside the div should be visible next to the text box
<div id="edata" class="edata" >
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
<div class="keys_values" style="float:'left';">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
I'd recommend using this:
<div id="edata" class="edata">
<input type="text" class="users_percentage" placeholder="% of users" />
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
</div>
CSS:
.users_percentage {
width:65px;
float:left;
margin-right:4px;
}
.keys_values {
float: left;
}
.e_keys, .e_values {
width: 65px;
}
Using the classes your elements already have allows you to separate the style and structure of the page.
Note: margin-right: 4px was only added to match the other input's style. If you're using normalize.css or similar then it might not be necessary.
Here it is working: http://jsfiddle.net/Fr3kD/1/
Update: To add extra span elements below each other use this HTML:
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
and add an extra CSS style:
.keys_values span{
display: block;
}
Here's a demo: http://jsfiddle.net/Fr3kD/3/
<div id="edata" class="edata" >
<div style="float:left; width:49%">
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
</div>
<div class="keys_values" style="float:left; width:49%">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
Try this
<div class="keys_values" style="float:'left';margin:-26px 0 0 70px">
DEMO
I just started using bootstrap CSS with a setting form I am designing.
The form has 3 top level settings, radio1 (y or n), TopSettings (which has 3 sub-settings: Enable, textbox1, textbox2) and mediaDir (textbox). I am trying to align these 3 top level labels on the left, and align the 3 sub-settings of TopSettings on the right.
Before bootstrap, I was able to achieve these using hard-coded html tables.
(In the image: Top - the look I wanted, and achieved with hard-coded tables in html. Bottom - what from looks like with bootstrap)
<form name="serverSetting">
<fieldset> <legend> <b>Settings</b> </legend>
<div>
<table class="code">
<tr>
<td class="padded"> radio1= </td>
<td class="padded"> <input type="radio" name="radio1" value="Y">y
<input type="radio" name="radio1" value="N">n </td>
</tr>
<tr>
<td class="padded"> TopSettings=</td>
<td class="padded">
<table class="code" cellspacing = "0" cellpadding = "0">
<tr>
<td>Enabled= </td>
<td> <input type="radio" name="Enabled" value="Y">y
<input type="radio" name="Enabled" value="N">n ; </td>
</tr>
<tr>
<td>texbox1=</td>
<td><input type="number" name="textbox1" value=40>;</td>
</tr>
<tr><td>textbox2=</td>
<td><input type="number" name="textbox2" value=640>;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="padded">mediaDir= </td>
<td class="padded"><input type="text" name="mediaDir" value="/data/media">;</td>
</tr>
</table>
</div>
</fieldset>
</form>
However when I switched to Bootstrap, the inline property of the 3 sub-settings has lost. I did add "inline" class with div and the Enable radio is displayed inline, but textbox1 and textbox2 are not.
<form class="form-horizontal" name="serverSetting">
<fieldset> <legend> <b>Settings</b> </legend>
<div class="control-group code">
<label class="control-label code" for="xcode">radio1=</label>
<div class="controls">
<input type="radio" name="radio1" value="Y">y
<input type="radio" name="radio1" value="N">n
</div>
</div>
<div class="control-group code">
<label class="control-label code" for="TopSettings">TopSettings=</label>
<div class="controls form-inline">
<label class="inline" for="TopSettings">Enabled= </label>
<input class="code" type="radio" name="Enabled" value="Y">y
<input class="code" type="radio" name="Enabled" value="N">n
</div>
<div class="controls form-inline">
<label>textbox1e=</label>
<input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40>
</div>
<div class="controls form-inline">
<label for="textbox2">textbox2=</label>
<input type="number" name="textbox2" placeholder=640>
</div>
</div>
<div class="control-group code">
<label class="control-label code" for="mediaDir">mediaDir=</label>
<div class="controls">
<input type="number" name="mediaDir" placeholder="/data/meida/">
</div>
</div>
</fieldset>
</form>
I was opening the html in Firefox. (I also tried to chrome, it was displayed inline but not align.) Does anyone know how to achieve the display as the above picture?
EDIT: my css file:
div{
max-width:550px;
}
.code {
font-family: "Courier New", Courier, monospace;
}
input{
}
.code {
font-family: "Courier New", Courier, monospace;
}
label.code {
font-family: "Courier New", Courier, monospace;
}
Here is a working version of your code on fiddle.
What was causing the problem:
When using Bootstrap horizontal forms always remember that the structure should be as follows:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
</form>
So in your case you should nest the "sub-settings" in a single div class="controls": the one after the "TopSettings=" label block. This is logical as all of the "sub-settings" form one nested block that is the control corresponding to the label "TopSettings=".
Then, there is no need to use form-inline: notice that the nested block (the "sub-settings" group) is nothing else than another nested instance of form-horizontal. Since the properties of form-horizontal are already inherited from the parent form, there is no need to repeat oneself. Instead, you should wrap each of the three "sub-settings" in a control-group div which in its turn will contain the label and the control.
Here is the revised code:
<div class="control-group code">
<label class="control-label code">TopSettings=</label>
<div class="controls">
<div class="control-group code">
<label class="control-label">Enabled= </label>
<div class="controls">
<input class="code" type="radio" name="Enabled" value="Y"/>y
<input class="code" type="radio" name="Enabled" value="N"/>n
</div>
</div>
<div class="control-group code">
<label class="control-label">textbox1=</label>
<div class="controls">
<input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40 />
</div>
</div>
<div class="control-group code">
<label class="control-label">textbox2=</label>
<div class="controls">
<input type="number" name="textbox2" placeholder=640 />
</div>
</div>
</div>
</div>
EDIT
To align the sub-controls you can add the following custom two classes to your css:
.form-horizontal .control-label.subcontrol-label{
width: auto;
}
.form-horizontal .controls.subcontrols{
margin-left: 80px;
}
and use them accordingly with the sub-settings labels e.g.
<label class="control-label subcontrol-label">
and controls div e.g.
<div class="controls subcontrols">.
You can find the updated version of the demo here.