Geek Answers Handbook

JQuery Mobile - Displays an embedded HTML form

Purpose: To display a text box and send the button on the same line in jQuery Mobile.

Problem: They will not appear on one line.

I tried many times to display a text box and a submit button on the same line, but it never works. Here is my code and combinations that I used ...

<form method="GET" style="display: inline-block;"> <input type="text" name="id" value="Other"> <input type="submit" data-type="button" data-icon="plus" value="Add"> </form>

This did not work.

 <form method="GET"> <span> <input type="text" name="id" value="Other"> <input type="submit" data-type="button" data-icon="plus" value="Add"> </span> </form>

It wasn’t either.

 <form method="GET"> <ul style="display: inline; list-style-type: none;"> <li style="display: inline;"><input type="text" name="id" value="Other"></li> <li style="display: inline;"><input type="submit" data-type="button" value="Add"></li> </ul> </form>

What am I doing wrong and how can I achieve my goal?

Thank you and merry christmas!

+7
source share
3 answers

Does the grid work?

HTML:

 <fieldset class="ui-grid-a"> <div class="ui-block-a"> <input type="text" name="id" value="Other"> </div> <div class="ui-block-b"> <input type="submit" data-type="button" data-icon="plus" value="Add"> </div> </fieldset>
+14
source

You can use a multimedia query to display a button in a line with text input to increase the width of the screen and show a text box above the send button for a smaller screen width:

 form .ui-input-text { display : inline-block; width : 65%; vertical-align : middle; } form > .ui-btn { display : inline-block; width : 25%; vertical-align : middle; } @media all and (max-width:480px) { form .ui-input-text { width : 100%; } form > .ui-btn { width : 100%; } }

Here is a demo: http://jsfiddle.net/fmJGR/

I use the classes added by jQuery Mobile to target elements, which is especially useful for working with the submit button, because the HTML structure after initializing jQuery Mobile is not like an initialized element.

This is what the HTML submit button is after jQuery Mobile initializes it:

 <div data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false"> <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"> <span class="ui-btn-text">Add</span> <span class="ui-icon ui-icon-plus ui-icon-shadow"></span> </span> <input type="submit" value="Add" data-icon="plus" data-type="button" class="ui-btn-hidden" aria-disabled="false"> </div>

If you want to support IE7, you will need to add the following code because IE7 does not understand display : inline-block :

 form .ui-input-text { display : inline-block; width : 65%; vertical-align : middle; /*Fix for IE7*/ *display : inline; zoom : 1; } form > .ui-btn { display : inline-block; width : 25%; vertical-align : middle; /*Fix for IE7*/ *display : inline; zoom : 1; }
+6
source

Add them to two separate columns within the row of the HTML table.

0
source

More articles:


All Articles