Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the use of data-role="fieldcontain"?

I just discovered that text inputs within a div with data-role="fieldcontain" don't expand to the 100%, but if you place a text input outside of a fieldcontain it expands to the fullest. This is a bug that they are fixing, but meanwhile...

So I was wondering what is the use of that data-role="fieldcontain" in the first place? Why to put it? I saw it on the documents and I just put it in my html, but what is the use of putting it?

Thanks!

like image 929
subharb Avatar asked Sep 14 '12 09:09

subharb


People also ask

What is Data role in jQuery Mobile?

Pages & DialogsA page in jQuery Mobile consists of an element with a data-role="page" attribute. Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-role="header" , class="ui-content" , and data-role="footer" .

What are the different controls in jQuery Mobile form?

In jQuery Mobile you can use the following form controls: Text Inputs. Search Inputs. Radio Buttons.


2 Answers

Looks like it's a Field Container for Grouping and Display

  • http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html

Field container
Container with data-role="fieldcontain" wrapped around label/form element pair


Controlgroup
DIV or FIELDSET container with data-role="controlgroup". Visually integrate multiple button-styled inputs of a single type (checkboxes, link-based buttons, radio buttons, selects) into a group. For grouping form checkboxes and radio buttons, the fieldset container is recommended inside a div container with the data-role="fieldcontain", to improve label styling.

data-mini true | false - Compact sized version for all items in the controlgroup
data-type horizontal | vertical - For horizontal or vertical item alignment

like image 113
Phill Pafford Avatar answered Oct 18 '22 23:10

Phill Pafford


As of jquerymobile 1.4 data-role="fieldcontain" is deprecated!

use class="ui-field-contain" instead.

see release notes http://jquerymobile.com/changelog/1.4.0/

like image 41
staabm Avatar answered Oct 19 '22 01:10

staabm