I have a asignment where i have to create a form that resizes nicely depending on the resolution.
Everything works as it should except for 2 select boxes that are position inline.
When the page gets resized, the second select box drops down and its label remains up.
I want the the second select box and its lable to go underneath the first select box and its lable togheter and aranged one under the other.
If possible i would like a solution in css only, preferably CSS2.
If i need to add something else or anything, please let me know and i will edit my post.
lable
<div style="display:inline">
<div style="display:inline">
<p style="display:inline; padding-left: 5em">select #1</p>
<select style="width:30%;margin-right: 8em" name="experience">
<option value="1" label=" "></option>
<option value="2" label=" "></option>
<option value="3" label=" "></option>
<option value="4" label=" "></option>
</select>
</div>
<div style="display:inline">
<p style="padding-left: 1em; margin-right: 5em; display:inline">select #2</p>
<select style="width:30%" name="experience">
<option value="1" label=" "></option>
<option value="2" label=" "></option>
<option value="3" label=" "></option>
<option value="4" label=" "></option>
</select>
</div>
</div>
You can use float:left; instead of display:inline; and give fixed width to the select element.
Jsfiddle
Related
i have this datalist and i am assuming that data in options has morethan 100, and I want to have a max height so that the design looks neat. please help me to guys. thank you.
<input type="text" list="suggestions" class="form-control" style="width: 100%;" >
<datalist id="suggestions" >
<option value="Blue">
<option value="White">
<option value="Black">
<option value="Red">
<option value="Green">
<option value="Blue">
<option value="White">
<option value="Black">
<option value="Red">
</datalist>
Do you want a scrollable div to show all the options?
If yes, you can set the height of the parent 'div' to a set height and set the "overflow-y:auto" .
Multiple divs, each with a label and a dropdown. What is the simplest way to force the dropdown/label pair to always be on the same line, and force the next pair down to the next line depending on the size of the screen?
So far I have:
<div style="display:inline-block; vertical-align:middle; width:100%;">
<div style="float:left; width:40%; display:block;">
<label for="zone"><b><%=zonestr%></b></label>
<select id="zone" name="zone" onchange="getDIV();start();">
<option value=""><%=selectstr%><%=zonestr%></option>
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
</div>
<div style="float:left; width:60%;">
<label for="district"> <b><%=resultstr%></b> </label>
<select id="district" name="district">
<option value=""><%=selectstr%><%=resultstr%></option>
<option value=""></option>
</select>
</div>
</div>
You can use bootstrap grid as per codepen link have:
codepen.io/greatzspido/pen/YrvQry
If you don't want to include complete bootstrap, you can use ultimate light weight grid structure of https://neat.bourbon.io/.
I'm trying to do something and I know using < br> isn't a good way of putting stuff on a new line so I was told to try H1-6's so I did but it instead made my answer and question on two different lines but if I do it like this
<div>
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">
Choose a room
</option>
<option value="S308">
S308
</option>
<option value="S324">
S324
</option>
<option value="L2">
L2
</option>
<option value="ME201">
ME201
</option>
<option value="ME208">
ME208
</option>
</div>
<div>
</select> <br>
<label for="machinenum">Select Your Machine Number:</label>
<label for="machinenum">1 - 15 </label>
<input id="machinenum" name="machinenum" type="number" min="1" max="15" value="1" required><br>
</div>
Then it works fine the outcome is like this:
instead of being like this:
or even without the h4 then having all questions stick together.
why not like this?
<div id="room">
<div>
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">Choose a room</option>
<option value="S308">S308</option>
<option value="S324">S324</option>
<option value="L2">L2</option>
<option value="ME201">ME201</option>
<option value="ME208">ME208</option>
</div>
...
</div>
You can use CSS for this:
your-selector-with-heading-and-input {
display: inline-block
}
jsFiddle: https://jsfiddle.net/sxLyox0e/
And you also should use label for the select heading and style the font size via CSS
<select id="Semester">
<option value="Fall">Fall</option>
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
</select>
<select id="Year">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<p>
<input class="submit" value="Submit" type="submit" />
</p>
I have this code, which, on StackOverflow is on one line (except for the button). On our CMS, however, each select element shows up on a different line like this:
What can I do to force these all on to one line?
Add display: inline-block to all your elements to make them display in one line:
<select id="Semester" style="display: inline-block;">
<option value="Fall">Fall</option>
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
</select>
<select id="Year" style="display: inline-block;">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<p style="display: inline-block;">
<input class="submit" value="Submit" type="submit" />
</p>
To me, the best solution is also display: inline-block.
However, if you don't have access to the html template files on your CMS, you can try to insert the following on your .css file:
#Semester, #Year, #Year + p { display: inline-block;}
If it still doesn't work, try adding !important just before the last ;
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.