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

Question

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

Answer 1

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

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)

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

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.)

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...

验证码

 看不清?

提交回复

热议问题