Making jquery mobile textfield on same line as text

Question

Is there a way to do the following with jQuery Mobile?

Hello [________________________]

instead of what jQuery Mobile currently does, which is put these two on multiple lines:

Hello

[________________________]

Currently I am creating my text and textinput like so:

<div id="customTagEntryDiv">
  <span id="userTag">Hello</span>
  <input type="text" name="customTagField" id="customTagField" value=""  />
  </div> 

Answer 1

Yes you can, you need to use field containers, with data-role="fieldcontain".

For example:

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>  

With the code above, you should get something like this:

Text Input: [____________]

and not something like this:

Text Input:
[____________]

You can use this "format" for many types of elements: text inputs, radio buttons, select menus, etc. However, I think that if your text is too long, in this case, the element may automatically go to the next line...

---

Given your example, you may wanna try something like this:

<div id="customTagEntryDiv" data-role="fieldcontain">
    <label id="userTag" for="customTagField">Hello</label>
    <input type="text" name="customTagField" id="customTagField" value=""  />
</div> 

---

Check the online doc for more information: http://jquerymobile.com/demos/1.1.1/docs/forms/textinputs/

Hope this helps.