CODEWITHSUNDEEP
jqueryjquery-mobile
Rob
Rob

Reputation: 7099

jquery mobile navbar & listview items sometimes get rounded corners

I'm having a strange issue with navbar & listview items, sometimes the markup jqm creates adds the ui-corner-top & ui-corner-bottom classes. This isn't documented and I can't figure out why this would happen, I don't have any custom functionality, I'm using Chrome Mac 17

My html (updated and removed data-role="button"):

  <div data-role="navbar" data-iconpos="right">
    <ul>
      <li><a href="#" class="help_button" data-icon="info" data-iconpos="notext">Help</a></li>
      <li><a href="#" id="save_button" data-icon="check">Save</a></li>
    </ul>
  </div>

Here's the html jquery creates (data-role="button" removed but still being enhanced with rounded corners):

<div data-role="navbar" data-iconpos="right" class="ui-navbar" role="navigation">
  <ul class="ui-grid-a">
    <li class="ui-block-a"><a href="#" class="help_button ui-btn ui-btn-up-a ui-btn-icon-right ui-btn-up-undefined" data-icon="info" data-iconpos="right" data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="span"><span class="ui-btn-inner ui-corner-top ui-corner-bottom"><span class="ui-btn-text">Help</span></span></a></li>
    <li class="ui-block-b"><a href="#" id="save_button" data-icon="check" data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="span" data-iconpos="right" class="ui-btn ui-btn-up-a ui-btn-icon-right" name="save_button"><span class="ui-btn-inner ui-corner-top ui-corner-bottom"><span class="ui-btn-text">Save</span></span></a></li>
  </ul>
</div>

How it looks:

Rounded corners on navbar

Same is happening on a footer navbar

Rounded corners on footer navbar

It's also started doing it to listview items

JQM's html:

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-bottom ui-btn-up-a">
  <div class="ui-btn-inner ui-li ui-corner-top ui-corner-bottom">
    <div class="ui-btn-text">
      <a href="#settings" class="ui-link-inherit">
        <img src="editor/images/icons/settings.png" class="ui-li-icon ui-li-thumb" alt="">
        Site settings
      </a>
    </div>
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
  </div>
</li>

rounded inset listview

Happening on some of the 1.1.0 RC1 demos too:

http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/bars-fixed-options.html

Upvotes: 2

Views: 5355

Answers (2)

Rob
Rob

Reputation: 7099

This is infact a bug with jquery mobile collapsable, corner classes are applied to all .ui-btn-inner elements in the dom rather than just those in the scope of a collapsable.

It has been fixed in the latest source of jquery mobile, the following pull request details the fix: https://github.com/jquery/jquery-mobile/pull/3661

I have tested the latest source with this fix and it completely solves the issue.

Upvotes: 0

Jasper
Jasper

Reputation: 75993

Remove data-role="button" from the link tags in your navbar. They are being initialized as button widgets and as navbar link widgets, which results in funny looking buttons.

Here is a demo: http://jsfiddle.net/jasper/qXr79/

Upvotes: 1

Related Questions