opitzconsulting / jquery-mobile-angular-adapter

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

Horizontal buttonset appears vertical again #77

Closed blasky closed 11 years ago

blasky commented 11 years ago

I saw there was a previous issue about horizontal buttonsets being rendered vertically. This issue appears to be back again in the 1.1.2-SNAPSHOT.js. It appears that there are extra "fieldset" tags being generated.

See the fiddle. Thanks.

http://jsfiddle.net/wDc9w/

tbosch commented 11 years ago

Hi, yes, we do generate extra

around checkboxes (which are used in your example) and their labels. This is required for the integration between angular and jquery (see the Changelog.md for details). However, you can place your own
around the label and input element. Then the adapter will not generate another element.

So you could end up with something like this for a horizontal array of checkboxes: http://jsfiddle.net/wDc9w/1/

<div data-role="controlgroup" data-type="horizontal">
        <fieldset ng-repeat="thing in things" style="display:inline">                
            <input type="checkbox" id="c-{{thing}}" />
            <label for="c-{{thing}}">{{thing}}</label>            
        </fieldset>
</div>

The trick is to use your own fieldset element with a style of display:inline.

Thanks for reporting this. I have to think about this a little more and therefore will leave this ticket open...

Tobias

blasky commented 11 years ago

Seems like a perfectly reasonable work around (...or solution) for this case. I'll keep my eye out for other cases. Thanks.

tbosch commented 11 years ago

Hello, your initial jsfiddle works well now.