Put two input texts on one line

Question

I am using html and jquery mobile.here - this is the code:

<div data-role = "content"> <form action = "?" method="post" name="form" id = "form"> <fieldset> <div data-role = "fieldcontain" class = "ui-hide-label"> <label for="name">Name</label> <input type="text" name="name" id="name" value="" placeholder="Name" /> </div> <div data-role ="fieldcontain" class= "ui-hide-label"> <label for="surname">Surname</label> <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> </div> <div data-role ="fieldcontain" class= "ui-hide-label"> <label for="address">Address</label> <input type="text" name="address" id="address" value="" placeholder="Address"/> </div> <div data-role="fieldcontain" class="ui-hide-label"> <label for="birth-place">Birth Place</label> <input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" /> </div> <div data-role = "fieldcontain" class="ui-hide-label"> <label for="province">Province</label> <input type="text" name="province" id="province" value="" placeholder="PR" /> </div> <div data-role="fieldcontain" class="ui-hide-label"> <label for"date">Birth Date</label> <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" /> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" /> <label for="radio-choice-1">Male</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" /> <label for="radio-choice-2">Female</label> </fieldset> </div> <div data-role="fieldcontain" data-type="horizontal"> <label for="select-choice-0"></label> <select name="select" id="select"> <option value="politrauma">Politrauma</option> <option value="cardiologico">Cardiologico</option> <option value="neurologico">Neurologico</option> </select> </div> </fieldset> </form> </div> 

I cannot insert two input texts on one line. I tried a grid block, but that didn't work

Answer 1

You should look at the location of the two columns in jquerymobile: jquerymobile.com/demos/1.0.1/docs/content/content-grids.html

Your code should look something like this:

 <form action = "./includes/user_form.php" method="post" id = "form"> <div class="ui-grid-a"> <div data-role = "fieldcontain" class = "ui-hide-label ui-block-a"> <label for="name">Name</label> <input type="text" name="name" id="name" value="" placeholder="Name" /> </div> <div data-role ="fieldcontain" class= "ui-hide-label ui-block-b"> <label for="surname">Surname</label> <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> </div> </div> </form> 

Answer 2

I know this question is old, but I had the same problem and it helped me:

 <fieldset class="ui-grid-a"> <div class="ui-block-a"> <input type="text" id="" name="" value=""> </div> <div class="ui-block-b"> <input type="text" id="" name="" value=""> </div> 

You can even add a style to change the relative size of the field.

Answer 3

Just add float to divs:

 <form action = "./includes/user_form.php" method="post" id = "form"> <div data-role = "fieldcontain" class = "ui-hide-label" style="float:left"> <label for="name">Name</label> <input type="text" name="name" id="name" value="" placeholder="Name" /> </div> <div data-role ="fieldcontain" class= "ui-hide-label" style="float:left"> <label for="surname">Surname</label> <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> </div> </form> 

Answer 4

I use the <span> wrapper around the input with a class that overrides the display attribute of the nested <div> (generated by jQuery mobile). You must also explicitly set the input width.

Example http://jsfiddle.net/FabyD/

CSS

 .inlineinput div { display: inline; } 

HTML:

 <div> some text <span class="inlineinput"> <input type='text' style='display: inline; width: 50px;' /> </span> some text <span class="inlineinput"> <input type='text' style='display: inline; width: 50px;' /> </span> some text </div> 

Answer 5

DIV are block elements - by default they occupy 100% of the width. This causes the following items to appear on the "next line".

So, you need to move the second set of elements to the same DIV as the first (or rebuild your DIVs with a fixed width and use a float, but this is a bit more complicated)

Answer 6

Another tip is checking the type data-type = "horizontal" (no pun intended).

 <fieldset data-role="controlgroup" data-mini="true" data-type="horizontal"> <div data-role="fieldcontain"> <label for="textinput11"> Something: </label> <input name="something" id="textinput11" placeholder="" value="" type="text"> </div> <div data-role="fieldcontain"> <label for="textinput12"> Something else: </label> <input name="something_else" id="textinput12" placeholder="" value="" type="text"> </div> </fieldset>