jquery/jquery-mobile — Issue #3147: <div data-role="fieldcontain"> add unnecessary dividing line with hidden labels
Author: ora726
Created: 2011-11-23 10:54:15+00:00
State: open

the fieldcontain wrapper add a dividing line between fields on narrow screens. I assume this is a wanted feature that allow the user to visually associate a label with a field.
When hiding fields with class="ui-hide-label" and using placeholders to concentrate more fields on one screen the dividing line on narrow screens just waste space and defeat the purpose.
I have tried to remove fieldcontain but then the fields are not full width on larger screens.
The problem is already visible on the width of an iphone in portrait.

I think the proper behavior would be to remove the dividing line if the labels are hidden.
There is a catch here if trying to do that with forms containing fields and checkboxes as the checkboxes labels can not be hidden because they are overlaid on top of the checkbox.
I have created a jsfiddle to demonstrate the problem.
http://jsfiddle.net/ora726/P3Zsc/4/
Change the width of the window and you will see the dividing lines appear.

Is there a simple way to turn them off ?

Thanks

-Raymond