search

opitzconsulting / jquery-mobile-angular-adapter

jquery mobile angular adapter
MIT License
517 stars 114 forks source link

Sliders inside of a div with data-role="fieldcontain" do not render properly. #104

Closed nvahalik closed 11 years ago

nvahalik commented 11 years ago

The <div> element that jqm creates gets rendered with display:inline-block. So when you wrap jqm's generated markup with your new div: 

<div ng-create="...">
    .... slider code ....
</div>

That div gets rendered with display: block and it breaks the rendering of the form. Like this:

Screenshot_1_5_13_11_50_AM

As a workaround, I've added this line to my CSS: 

.ui-field-contain div[ngm-create] { display: inline-block; }

With that line, the problem disappears:

Screenshot_1_5_13_11_52_AM

JSFiddle: http://jsfiddle.net/nvahalik/HhXvC/

The CSS fix is the first line in the CSS frame.

nvahalik commented 11 years ago

Consequently, other elements suffer from the "fix". Grouped checkboxes must be updated as well:

.ui-field-contain div[ngm-create].ui-checkbox { display: block; }

The JSFiddle has been updated accordingly.

tbosch commented 11 years ago

Hi, thanks for reporting this! I see that jqm does not insert this div, but the adapter does, you are right!

Tobias

tbosch commented 11 years ago

Hi, sorry, but the wrapper DIV is required for angular to work, as the angular compiler does not like elements appending siblings...

However, the adapter now adds display:inline-block to the wrapper elements, just as you selects. See version 1.2.1-SNAPSHOT.js and this fiddle: http://jsfiddle.net/HhXvC/5/

Tobias

tbosch commented 11 years ago

Does this work for you?

rodcloutier commented 11 years ago

Works for me. Thanks!

rodcloutier commented 11 years ago

It seems we have a similar problem with range input when in a field-contain. See fiddle: http://jsfiddle.net/rodcloutier/MhFF6/3/

I think It should be inline instead of inline-block.

tbosch commented 11 years ago

Hi, this problem will be easily fixed in jqm 1.3, as there all inputs are wrapped by jqm into divs (including ranges). Tagging this issue for jqm 1.3 as it will be very easy to solve there.

Tobias

tbosch commented 11 years ago

Hi, I found a way to solve this, see here :http://jsfiddle.net/HhXvC/13/ and the 1.2.1-SNAPSHOT.js However, there is the restriction now (until jqm 1.3) that ng-repeat or other conditional directives are not allowed directly on sliders, as jqm internally creates two sibling elements without a parent (which it does in jqm 1.3).

Tobias