CODEWITHSUNDEEP
jquery-mobile
Mad Echet
Mad Echet

Reputation: 3881

JQuery Mobile - Position a input button next to an input text area

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

I have been trying to play around with ui-grid-a and similar options but everything fails miserably. You can see some attemps there. They are all equally ugly but the most complicated thing is to get the two elements side by side with one that has a fixed width (the button) and one that should take the rest of the width (hence neither fixed nor a percentage).

Do you have any idea how to render this properly?

In a dream world jQuery would have some built-in function to group those controls (just like <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> for grouping checkboxes. But it does not seem so.

Thanks a lot for your help,

Mad

Upvotes: 7

Views: 16056

Answers (4)

veeTrain
veeTrain

Reputation: 2915

Hidden within jQuery Mobile's own documentation I found an approach that worked just fine for my search box + search button implementation.

In that page, they are comparing things side-by-side by using a simple <table> layout which inspired me to rely on this as well. While tables are NOT the go-to resource for doing layout/design well, it is extremely effective, simple, and circumvents many of the hassles of the workarounds I'm seeing here. Here is what my approach can do for your jsfiddle you linked. See the fourth iteration.

In other words, due to the complicated nature of how jQuery Mobile builds a page, adds in divs and styling that aren't in your markup, etc., this might be your best option for this particular scenario:

  • Wanting two columns of items where the second column is a fixed width.
  • Where the first column expands to fill the width of the screen on resize.
  • Where you want the elements to encompass the whole width of the device.

(Notably, if you wanted to tweak any of these particular aspects, some simple CSS padding or aligning should do the trick starting with this base 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 should name and give an id to these items if you want to post them somewhere or manipulate them in javascript. Hopefully this proves helpful to someone else who is not put off by the nature of <table>s. I have been unable to see a downside to this approach using jQuery Mobile's simple interface / theming.

Lastly, you may want to stop and ask yourself if a submit button is even necessary. In mobile devices such as mobile safari, there is a button on the keyboard labeled "Go" whenever form input elements are being interacted with. This operates the same as a return key and can submit the search term. I have not vetted this option on other browsers at this time.

(This is not a solution to rival your approach to shift the icon of the search box. That is very clever but doesn't seem to be what your original question was about.)

Upvotes: 13

mike029
mike029

Reputation: 321

the way I solved this problem was to float the input box next to the button, then have pagebeforeshow set the size of the input box to window width minus the size of the button.

Upvotes: 2

Mad Echet
Mad Echet

Reputation: 3881

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

I find it much better in terms of integration with jQuery Mobile. However, it could be vulnerable to upgrades in jQuery Mobile since it relies on how the icon image file is organized.

I simply added this CSS rule : 

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

And the icon magically turns into a data-icon="check". Exactly what I was looking for! You can pick whatever icon you want by changing the offset and looking into images/icons-18-white.png for the icon mapping.

Of course you will want to refine the selector so you only target the input boxes you want to change.

Enjoy the hack.

Upvotes: 2

Mad Echet
Mad Echet

Reputation: 3881

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

  • A validate button is most of the time unnecessary and against the logic of mobile applications. It is better to use <input type="search" /> for such problems
  • The framework does not allow to customize the icon for type="search" content.

To make for the latter, I put together an ugly hack that you can see there. Unless you zoom in quite a lot you won't see a difference with the regular type="search" besides the darker grey. However, I suspect this solution could be vulnerable to minor changes to the framework in the future.

Another solution would be to directly pull out the icon and manually overimpose an home made icon button over the input. It should be slightly more robust (because at least the button would not be based on the framework) but requires a few quick photoshop changes to pull out the icon and put it in a propper file.

Upvotes: 0

Related Questions