JQuery Mobile - Place the enter button next to the text input area

Question

I am trying to get the input text area and the submit button attached to the right of it. Ideally, the two together will use 100% of the width and be just side by side.

I tried to play with ui-grid-a and similar parameters, but everything is not so pathetic. You can see some attemps there . They are all equally ugly, but the hardest part is to put together two elements next to the one that has a fixed width (button), and one of them should occupy the rest of the width (hence, neither fixed nor percentage).

Do you have any idea how to do this correctly?

In the dream world, jQuery will have a built-in function for grouping these controls (just like <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> for grouping checkboxes. But this is not so .

Many thanks for your help,

Mad

Answer 1

I have found a new answer for those of you who are looking at this thread.

I find this much better in terms of integration with jQuery Mobile. However, it may be vulnerable to updates in jQuery Mobile, as it relies on how the icon image file is organized.

I just added this CSS rule:

 .ui-icon-searchfield:after {background-position: -252px !important;} 

And the icon magically turns into data-icon="check" . Exactly what I was looking for! You can select any icon you want by changing the offset and viewing images/icons-18-white.png to display the icons.

Of course, you need to refine the selector so that you only target the input fields you want to change.

Enjoy the hack.

Answer 2

Hidden in jQuery Mobile's own documentation . I found an approach that worked fine for the search box + . strong> implementation.

On this page, they compare things side by side using a simple <table> layout that inspired me to do the same. While tables are NOT a suitable resource for proper layout / design, it is extremely efficient, simple, and bypasses many of the workarounds that I see here. Here is what my approach can do for your jsfiddle you linked . See Fourth Iteration.

In other words, due to the complex nature of how jQuery Mobile creates a page, adds to the div and style that are not in your layout, etc., this might be your best option for this particular scenario:

• Two columns of elements are required where the second column is fixed.
• When the first column expands to fill the width of the screen when resizing.
• Where you want elements to cover the entire width of the device.

(Remarkably, if you want to customize any of these aspects, some simple CSS add-ons or alignment should do the trick starting with this basic solution)

 <table style='width:100%'><tr> <td> <input type='text' (or type='search') /> </td> <td style='font-size:80%; width:7em'> <input type='submit' value='Submit' /> </td> </tr></table> 

Obviously, you must name and give id these elements if you want to place them somewhere or manipulate them in javascript. Hope this proves useful to someone who is not estranged from the nature of <table> s. I could not see the drawback of this approach using jQuery Mobile's simple interface / theme.

Finally, you can stop and ask yourself if you need a submit button. On mobile devices, such as mobile safaris, there is a button on the keyboard labeled “Go” that interacts with form input elements. This works the same as the return key, and can submit a search request. Currently, I have not tested this option in other browsers.

(This is not a solution to rival your approach to move the search box icon. It's very smart, but it doesn't seem to be what your original question was talking about.)

Answer 3

the way I solved this problem was to place the input window next to the button and then indicate that the page should be set to the size of the input window to the width of the window minus the size of the button.

Answer 4

After a fruitful discussion with adamdehaven, it turns out that:

• The validation button is in most cases unnecessary and contradicts the logic of mobile applications. For such tasks it is better to use <input type="search" />
• The frame does not allow icon customization for type="search" content.

To do the latter, I put together an ugly hack that you can see there . If you do not increase the scale, you will not see the difference with the usual type="search" , except dark gray. However, I suspect that this decision may be vulnerable to minor structural changes in the future.

Another solution would be to directly pull out the icon and manually override the icon home button above the input . It should be a little more durable (because at least the button will not be based on the framework), but it requires several quick Photoshop changes to pull out the icon and put it in the propper file.