CSS Forcing Multiple Selects to One Line
CSS Forcing Multiple Selects to One Line
(OP)
I'm no stranger to CSS but I have a small problem that someone can hopefully help me solve.
On a form, I've removed the old HTML tables and replaced them with a series of styles in an external sheet, some of which look at the field type to position and size it. That's all fine but I have a few instances where that is not working because multiple select boxes need to be presented side by side along with some text between them, as part of a date selector. Of course, this wants to put each selector onto a separate line so I need some way to stop it from doing so in those cases. (Colors, sizes, etc. are simply fillers until I can get it all working.)
The HTML is dynamic but basically like this as far as the browser is concerned (trimmed for this posting):
Any ideas?
On a form, I've removed the old HTML tables and replaced them with a series of styles in an external sheet, some of which look at the field type to position and size it. That's all fine but I have a few instances where that is not working because multiple select boxes need to be presented side by side along with some text between them, as part of a date selector. Of course, this wants to put each selector onto a separate line so I need some way to stop it from doing so in those cases. (Colors, sizes, etc. are simply fillers until I can get it all working.)
CODE
.VForm label, .VForm input, .VForm select, .VForm textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.VForm div {
overflow: hidden;
}
.VForm label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
float: left;
text-align: center;
cursor: pointer;
}
.VForm input, .VForm select {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
box-shadow: inset 0px 2px 2px #ececec;
} The HTML is dynamic but basically like this as far as the browser is concerned (trimmed for this posting):
CODE
<div> <label for="DateUpdated">Date Updated</label> <select name="month2" id="month2"> <option value="01">January</option> <option value="02" SELECTED>February</option> <option value="03">March</option> </select> <select name="day2" id="day2"> <option value="07">07</option> <option value="08" SELECTED>08</option> <option value="09">09</option> </select> , <select name="year2" id="year2"> <option value="2013">2013</option> <option value="2014" SELECTED>2014</option> </select> at <select name="hour2" id="hour2"> <option value="21">21</option> <option value="22" SELECTED>22</option> <option value="23">23</option> </select> :<select name="minute2" id="minute2"> <option value="46">46</option> <option value="47" SELECTED>47</option> <option value="48">48</option> </select> </div>
Any ideas?
Talk To Other Members
RE: CSS Forcing Multiple Selects to One Line
mmerlinn
http://mmerlinn.com
Poor people do not hire employees. If you soak the rich, who are you going to work for?
"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond
RE: CSS Forcing Multiple Selects to One Line
No matter, I removed the select from .VForm input, .VForm select{} and created a separate class and style for this type of select field, which does work after adding a class to the surrounding div:
CODE
. . . the class for it:
CODE
.VForm .NoWrap select { clear: both; display: inline-block; padding: 5px; white-space: nowrap; line-height: 1.5em; }For other selects, the only way I could make them work properly was to also add a class and separate bit style for them. I didn't really want to have to do it this way but without the class, I was unable to get it to not mess up the one above:
CODE
.VForm .Select select { width: 70%; padding: 5px; border: 1px solid #d4d4d4; border-bottom-right-radius: 5px; border-top-right-radius: 4px; line-height: 1.5em; float: right; box-shadow: inset 0px 2px 2px #ececec; }Thank you.
RE: CSS Forcing Multiple Selects to One Line
Your further code, now shows an element with a class of .Select inside the element with a class of .VForm but agan no such element in your HTML.
Your CSS implies thar your select boxes assuming they reside inside the proper elements will have a width of 70% of their parent container. This is probably the cause of them falling to the next line, as selects are inline elements by default. But if there isn't enough space to accomodate them they'll drop down.
----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Web & Tech