CODEWITHSUNDEEP
jquery-mobile
klewis
klewis

Reputation: 8350

Is it possible to have a button next to a search input with jquery mobile?

All the form examples in the docs for jQuery mobile show each form element on its own line. I would like to have a standard button (which will link to another page), to the right of a search input field. Is that possible with jQuery Mobile?

Thanks

Upvotes: 5

Views: 6067

Answers (3)

Emmanuel Gleizer
Emmanuel Gleizer

Reputation: 2018

With new version you can: http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs

The old style solution still works:overwriting the ui-input-search

div.ui-input-search{ 
  width: 55%;
  display: inline-block;
}

don't forget to add ui-btn-inline in the class of the a href (if you use the Button markup syntax)

Upvotes: 0

cautionbug
cautionbug

Reputation: 475

jQM's UI grids force columns of equal width. In my case, i wanted the submit button to be just the icon to allow the search box more room. i saw <table> mentioned in a couple posts, but discovered that other inputs (notably selectmenu) don't work correctly when they're children of unexpected elements. [1]

So to avoid breakage of the widgets, i managed this:

.ui-grid-a.my-grid-a .ui-block-a.my-block-8515-a {
    width: 84.95%;
}
.ui-grid-a.my-grid-a .ui-block-b.my-block-8515-b {
    width: 14.95%;
}

It's not bullet-proof, but it can be expanded to additional grid definitions. It uses specificity to get all the grid rules of the existing UI, but then redefine the column widths. No inline styles, no additional tags, and the widgets don't break. And because of specificity, it can be loaded before or after jQM's structure stylesheet.

[1]: https://github.com/jquery/jquery-mobile/issues/6077 jQM Github bug report

Upvotes: 0

J.T.Sage
J.T.Sage

Reputation: 1984

Not natively as an inline unit. However, form elements can be used together with the layout grid system reasonably effectively:

http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html

Upvotes: 1

Related Questions