CODEWITHSUNDEEP
cssjquery-mobile
Klikerko
Klikerko

Reputation: 1097

Why is data-role="fieldcontain" on this page not styled?

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!

Upvotes: 1

Views: 4338

Answers (2)

Jasper
Jasper

Reputation: 75993

I see what you mean, even on the documentation for jQuery Mobile 1.0 the Field Container section states that there should be a line on the bottom of the container but there isn't (http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html).

If you inspect the CSS rules for the .ui-field-contain class you can re-add these styles using CSS:

.ui-field-contain {
    border-bottom-width : 1px !important;
    padding-bottom      : 1.5em !important;
}

That should do it, the issue is that the jQuery Mobile 1.0 CSS is overwriting the border-bottom-width property to 0 for .ui-field-contain elements. I also added some padding to give the lines a little space from the inputs.

Here is a demo: http://jsfiddle.net/eQe5A/1/

UPDATE

After seeing Phill's answer I confirmed that the styling appears when viewing the page on a mobile device (tested with Android 2.3 device).

So the above CSS only changes how the page is rendered in desktop browsers.

Upvotes: 1

Phill Pafford
Phill Pafford

Reputation: 85308

If you view you jsFiddle on a mobile device (I'm using iPhone 4 iOS 5) the styling appears

enter image description here

Upvotes: 1

Related Questions