INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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.)

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?

RE: CSS Forcing Multiple Selects to One Line

I don't see how the CSS is interacting with the HTML that you posted. The HTML shows everything on a single line. So, exactly what are you doing?

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

(OP)
I'm not sure what you mean as everything in the HTML I posted is supposed to be on a single line, which is the point and the problem. The style was making each select be on its own line with the text between some of them being shoved over to the left below the label. It was expected as other selects need to be that way but I was looking for a way to "filter out" the styles for a couple specialized selects like this one.

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

<div class="NoWrap">
<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>
. . . etc.
</div> 

. . . 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

I see no element in your html with a class of .VForm

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close