CODEWITHSUNDEEP
jquery-mobile
togarha
togarha

Reputation: 175

jquery-mobile: label+input+label in some lines

I have a form that have some inputs that I want to show in line, but it breaks line before width is so small. This is the code:

<div data-role='fieldcontain' id='TempLimits'>
<label for='Tmin' style='display-inline;width:50px'> Min.:</label>
<input type='text' name='Tmin' id='Tmin' value='0' style='display:inline;width:50px' />
<label for='Tmin' style='display-inline;width:50px'> ºC</label>
<br>
<label for='Tmax' style='display-inline;width:50px'>Max.:</label>
<input type='text' name='Tmax' id='Tmax' value='60' style='display:inline;width:50px' />
<label for='Tmax' style='display-inline;width:50px'> ºC</label>

And this is the images that show what I want to keep and what is the problem (i can't publish directly by reputation):

In line labels Not in line labels

Furthermore, there is any way to have labels aligned to center/bottom of input instead of top of input?

Thanks a lot

Upvotes: 2

Views: 5617

Answers (1)

Stefan Fandler
Stefan Fandler

Reputation: 1141

Append the css-style float: left to the elements, which automatically go to the next line.

I think this should work for the first line:

<label for='Tmin' style='width:50px'> Min.:</label> <input type='text' name='Tmin' id='Tmin' value='0' style='float: left; width:50px' /> <label for='Tmin' style='float: left; width:50px'> ºC</label>

Upvotes: 4

Related Questions