I have a form on my site and I want to put a button and select tag on the same line, but it keep causing line break. I've tried a button instead and it works totally fine one after another on a line. I am using bootstrap 3.
<div class="panel-footer" style ="overflow: hidden; white-space: nowrap;">
<button type="submit" class="btn btn-success" style="width:100px; margin:4px;">send</button>
<button type="submit" class="btn btn-success" style="width:100px; margin:4px;">send</button>
<select class="form-control" style = "width:100px; margin:4px;">
<option value="volvo">Math</option>
<option value="saab">History</option>
<option value="opel">English</option>
<option value="audi">Gymnastics</option>
</select>
</div>
There is enough space for like 4 more selects on the line.
use display: inline; or display: inline-block; on the select and the button
You can put the select and button inside a table.
Works for me. Simple really.
<table>
<tr>
<td>
<select>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</td>
<td>
<input type="submit" value="Choose number">
</td>
</tr>
</table>
Related
I am using Bootstrap 3 and I have a table with some inputs and selects.
The inputs are about 1px lower than the select:
and no matter what I do I cant seem to get them to line up on the same level.
This rows HTML is like so:
<tr id="other-license-row-new" data-other-license-id="-1">
<td class="text-center">
Attach File
</td>
<td>
<select class="form-control other-license-class">
<option>C - Car</option>
<option>LR - Light Rigid</option>
<option>MR - Medium Rigid</option>
<option>HR - Heavy Rigid</option>
<option>HC - Heavy Combination</option>
<option>MC - Multi Combination</option>
</select>
</td>
<td class="expiry-date-row">
<input type="text" class="form-control other-license-expiryDate date-picker" data-position="top left">
</td>
<td>
<select type="text" class="other-license-state form-control">
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="VIC">VIC</option>
<option value="ACT">ACT</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
</select>
</td>
<td>
<input type="text" class="other-license-number form-control">
</td>
<td class="action-column">
...dropdown button html removed for brevity...
</td>
</tr>
I would like to know how I can align the inputs and select so it doesnt have he 1px difference.
I have tried:
select, input{
vertical-align: middle; //as well as all options in web inspector
}
How can i show below select list inline.
Currently the lists are just stacking one over another.
<div id="menuBar">
<form>
<select ng-model="selectOperation">
<option value="showtable">View table data</option>
<option value="inserttable">Insert table data</option>
</select>
<input type="submit" value="Submit">
</form>
<form ng-submit="formSubmit()">
<select ng-model="textbox">
<option value="emp">EMP</option>
<option value="dept">DEPT</option>
<option value="bonus">BONUS</option>
<option value="salgrade">SALGRADE</option>
</select>
<input type="submit" value="OK">
</form>
</div>
example here
http://fiddle.jshell.net/p6Lgn7bg/
Add:
form {
display: inline-block;
}
to your css. Alternatively, if you'd like to target just this form, use:
#menuBar form {
display: inline-block;
}
Your original code was close, you just have to target the form elements instead of the whole form.
I have made three drop down menu. I want to align one after the other. Below is the code I am using. But its not coming in the same line. What I want is first should go on left, second should go on center and third should go on right.
First is
<div style="float:left;">
<FORM name="mapform" method="POST">
<SELECT name="jump" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=1">Ask a Question</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=4">Vehicle for Sale</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform.jump.options[ document.mapform.jump.selectedIndex ].value;" value="Place an Ad!">
</FORM>
</div>
Second is
<div style="float:center;">
<FORM name="mapform2" method="POST">
<SELECT name="jump2" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/discuss">General Discussion</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform2.jump2.options[ document.mapform2.jump2.selectedIndex ].value;" value="Quick View !">
</FORM>
</div>
Third is
<div style="float:right;">
<FORM name="mapform1" method="POST">
<SELECT name="jump1" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=16">Start New General Discussion</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=28">Start New Event</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform1.jump1.options[ document.mapform1.jump1.selectedIndex ].value;" value="Start a Discussion!">
</FORM>
</div>
I am getting it as in the image
There is no float:center. Float your first two divs left, and the last one right. This should fix the problem, assuming you have enough space for all your elements on one line.
Here is a demonstration: http://jsfiddle.net/MCRUX/
In case you missed it in the example, I have set the width of each of the container divs to 30%:
<div style="float:left;width:30%;">
Use a table having 3 columns to align the drop down box.
<table width="100%">
<tr>
<td align="left">{drop down box 1}</td>
<td align="center">{drop down box 2}</td>
<td align="right">{drop down box 3}</td>
</tr>
</table>
As #Asad said, there is nothing called float:center. If the size of the parent element in which you are placing your divs has a fixed size, you can do some mathematical calculation and decide the size of the divs you are gonna place.
for example, if i have a parent box of 960px and want to place 3 divs inside it, i ll do something like this...
div.children {
width:313.33px;
margin-right:10px;
float:left;
}
div.children:last-child {
margin-right:0;
}
Since 313.33 X 3 ~ 940 plus total margin will be 20px and both will add upto 960px.
I have a jsfiddle below:
http://jsfiddle.net/C95uc/3/
I am having trouble with my css. I want to display both drop down menus on the left above one another and I want to display the text inputs on the right hand side, but how can I do this?
Below is the html code:
<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
</select>
</form>
</div>
<div class='lt-container' >
<form id='moduleExistForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
</select> </form>
</div>
<div id='rt-container' >
<form id='detailsForm'>
<table>
<tr>
<th></th>
<td><input type='hidden' id='idmodule' name='moduleid' value='' /> </td>
</tr>
<tr>
<th>Module ID:</th>
<td><input type='text' id='nomodule' name='moduleno' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Module Name:</th>
<td><input type='text' id='namemodule' name='modulename' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Credits:</th>
<td><input type='text' id='credits' name='creditsname' readonly='readonly' value=''/> </td>
</tr>
</table>
<div id='moduleAlert'></div>
</form>
</div>
CSS:
.lt-container, #rt-container {
float: left;
}
#rt-container {
clear: right;
margin-left: 5%;
}
http://jsfiddle.net/C95uc/4/
<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
</select>
</form>
<form id='moduleExistForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
</select> </form>
</div>
Both <select> go in the same <div class='lt-container'>
The two dropdowns don't stack on top of each other because you have assigned both of them a "float:left" property which makes them go side by side. Instead, wrap them in a div and make that div float left.
<div class="lfloat">
<!-- Both Dropdowns -->
</div>
CSS:
.lfloat {
float:left;
}
Be sure to add a "float:right" property to the form so that it doesn't appear below the two drop downs.
Example: http://jsfiddle.net/C95uc/5/
So I am web developer who used to have a kind graphics design person help me out on this sort of browser compatibility hell, but alas he has moved on to greener pastures. The following html looks fine and dandy on chrome, but the table I am using to align my form is sleeping on the job on the bottom in ie and firefox. Should I never use tables? Is the float in the div tags screwing everything up? Any hints or suggestions for improving my html and css would be much appreciated.
Also, the text area text gets a little screwy sometimes in terms of where it is positioned in the box.
Thank you all.
<div style="border-style:solid; border-color:#336699; padding: 5px; margin-left:auto; margin-right:auto; width:600px; height:300px;" id="demoContainer">
<div style="" id="demo">
<div style="" id="demoHeader">
<img src="someimage" />
<span style="font-size:32px;">Demo</span>
</div>
<div style="" id="demoBody">
<form method="get">
<div style="float:left; padding:5px;" id="demoBodyText">
<textarea style="resize:none;" rows="10" cols="30">
Enter demo text here...
</textarea>
</div>
<div style="float:right; padding:5px;" id="demoBodyOptions">
<table style="float:right;">
<tr>
<th>
Option 1:
</th>
<td>
<select style="">
<option>asdf</option>
</select>
</td>
</tr>
<tr>
<th>
Option 2:
</th>
<td>
<select style="align:left;">
<option value="320">Fastest</option>
<option value="260">Faster</option>
<option value="200">Fast</option>
<option value="170" selected="selected">Default</option>
<option value="130">Slow</option>
<option value="110">Slower</option>
<option value="80">Slowest</option>
</select>
</td>
</tr>
<tr>
<th>
Option 3:
</th>
<td>
<select>
<option value="4.2">Highest</option>
<option value="3">Higher</option>
<option value="2">High</option>
<option value="1" selected>Default</option>
<option value="0.8">Low</option>
<option value="0.6">Lower</option>
<option value="0.4">Lowest</option>
</select style="align:left;">
</td>
</tr>
<tr>
<th>
Option 4
</th>
<td>
<select>
<option value="none">None</option>
</select style="align:left;" >
</td>
</tr>
<tr>
<td>
<input type="submit" />
</td>
</tr>
</table>
</div>
</form>
</div>
<div style="clear:both;" id="demoFooter">
Footer
</div>
</div>
</div>
EDIT: Added image in how it displays in my firefox version 10.
If you have a float:right after a float:left this seems pretty normal.
Try to switch the order of the two or give the second one also float:left
Or maybe the padding is the problem?
http://jsfiddle.net/HerrSerker/55cXT/
What are the width of your floated divs #demoBodyText and #demoBodyOptions?
See the fiddle - Is this you are looking for?
Fiddle: http://jsfiddle.net/jKtkq/
Demo: http://jsfiddle.net/jKtkq/embedded/result/
Screen shot: http://img39.imageshack.us/img39/7676/tableissue.jpg