search

ququplay / jquery-mobile-flat-ui-theme

jQuery Mobile Flat UI Theme
http://ququplay.github.com/jquery-mobile-flat-ui-theme
1.63k stars 386 forks source link

Theme not applied to data-role="button" when using data-content-theme #3

Closed rodcloutier closed 11 years ago

rodcloutier commented 11 years ago

The selected theme is not applied to <a href="#" data-role="button"> but is on regular buttons. See the following example: bug

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/jqm.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <a data-iconpos="notext" data-role="button" data-icon="home" title="Home">Home</a>
      <h1>A</h1>
      <a data-iconpos="notext" data-role="button" data-icon="flat-menu"></a>
    </div>

    <div data-role="content" data-content-theme="b" role="main">

      <a href="#" data-theme="b" data-role="button">Yes</a>
      <a href="#" data-role="button">Yes</a>

      <div data-role="collapsible" data-theme="g" data-content-theme="g" data-collapsed="false">
        <h3>Section 1</h3>
        <button data-icon="flat-mail">Yes</button>
        <a href="#" data-role="button">Yes</a>
        <div data-role="fieldcontain">
          <div data-role="controlgroup" data-type="horizontal">
          <button>Yes</button>
          <a href="#" data-role="button">Yes</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
mkuklis commented 11 years ago

It seems like JQM is not applying the right swatch in case of the data-role="button". When I look at the source I see swatch c instead of g:

<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Yes</span></span></a>

This seems to be a JQM issue (not css). As a work around you can try to explicitly set data-theme="g" to data-role="button" elements.