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
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 :
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 intoimages/icons-18-white.pngfor 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.