jQuery Mobile Docs says if we wrap form element in div containing data-role=fieldcontain proper

Question

0

Asked: May 28, 20262026-05-28T06:42:20+00:00 2026-05-28T06:42:20+00:00

jQuery Mobile Docs says if we wrap form element in div containing data-role=fieldcontain proper

0

jQuery Mobile Docs says if we wrap form element in div containing data-role="fieldcontain" proper styles would be applied, like horizontal line at a bottom.

I spent hours trying to figure out why is this not working so I’m just wondering is this feature removed from 1.0 Final or is this bug? I could swear this was working just a few days ago.

As an example I prepared this simple html page with default scripts delivered through CDN: http://jsfiddle.net/eQe5A/.

Can someone please shed some light on this issue.

Thanks,
Klikerko

EDIT:

After doing more research I have found that Safari and Opera are only desktop browser that would render jQuery Mobile pages as mobile browser would. My question above is related to special style applied to form elements when browser size is less than 450px. Those styles would add horizontal line divider below form element and would move label above the field if width is less than 450px and remove horizontal line and place label next to field if it’s above 450px. As mentioned above only Safari and Opera desktop browsers would render this properly so I guess if you are testing on local machine use those two browsers.

Thanks everyone who replied!