Click here to Skip to main content
15,884,298 members
Please Sign up or sign in to vote.
3.00/5 (1 vote)
See more:
I see that after adding this to my HTML form:

<label>Note: If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>

...it becomes insatiable as to how much width it will take - the further I pull out the window in which the HTML resides (on the jsfiddle page, which is here: http://jsfiddle.net/clayshannon/karpxwn2/11/[^]), the wider the border around the box becomes, so that it no longer floats up to the right of the first form.

I tried giving the labels a max-width and wrapping them, like so:

label {
max-width: 200px;
wrap: true;
}

...but that did nothing.

Here is the entire second form:

<form class="borderedform">
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />


<label>Form prepared by:</label>
<input type="text" id="formpreparedby" />


<label>Dept / Division</label>
<input type="text" id="deptdivision" />


<label>Email:</label>
<input type="email" id="email" />
<label>Ext:</label>
<input type="text" id="extension" />


<label class="reditalics">Required:</label>
<label>US Citizen - YES</label>
<input type="radio" id="uscitizenyes" value="YES" />
<label>NO</label>
<input type="radio" id="uscitizenno" value="NO" />


<input type="radio" id="visitor" />Visitor
<label>Foreign Visa Type:</label>
<select title="Please select a visa type">
<option value="pleaseselect">Please Select</option>
<option value="notapplicable">Not Applicable</option>
<option value="a1">A-1</option>
<option value="a2">A-2</option>
<option value="b1">B-1</option>
<option value="b2">B-2</option>
<option value="f1">F-1</option>
<option value="hib">H-1B</option>
<option value="h2a">H-2B</option>
<option value="h2b">H-3</option>
<option value="h3">J-1</option>
<option value="j1">P-1</option>
<option value="p1">P-2</option>
<option value="p2">P-3</option>
<option value="tn">TN</option>
</select>


<input type="radio" id="ucstudent" />UC Student


<input type="radio" id="ucemployee" />UC Employee
<label>UC Campus:</label>
<select title="Please select a campus">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>


<label>Note: If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>
</form>

It works fine until that last label is added, so it's definitely the label that is the "culvert."
Posted

First of all, you need to use width, not max-width; if the actual rendered size is less than this value, it's all right, you only need to wrap by some width value. But with the label it won't work, because of its display type. This is a couple of the simplest possible solutions:
CSS
label { width: 10em; display: block; }

or
CSS
label { width: 200px; display: inline-block; }

If you need the label to be on the side of the labelled element, you should better use inline-block. For really fine control of relative positions of labels and other elements, you can also use table layout styles, with the use of such values for the display property as table, table-cell and the like.

For further detail, please see:
http://www.w3.org/TR/css-display-3[^],
http://www.w3.org/wiki/CSS/Properties/display[^].

—SA
 
Share this answer
 
v4
Comments
Richard Deeming 3-Aug-15 11:44am    
Setting max-width would still work, so long as you change the display property as well.

It's even got pretty good browser support[^] - apart from some minor bugs in IE8, it's green across the board.
Sergey Alexandrovich Kryukov 3-Aug-15 13:22pm    
Agree. The real point here is the use of display.
—SA
Thanks to Sergey;

Although I couldn't quite use his solution, because it affected all the labels (naturally), this derivation of his idea works:

CSS
.wrappedlabel { width: 320px; display: block; }

HTML
<label class="wrappedlabel">Note: If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>
 
Share this answer
 
Comments
Sergey Alexandrovich Kryukov 3-Aug-15 13:22pm    
This is exactly the same as my solution. The answers are written not to copy and paste some code as is, but for explaining the idea.
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900