Theme not applied to data-role="button" when using data-content-theme
rodcloutier opened this issue · 1 comments
rodcloutier commented
The selected theme is not applied to <a href="#" data-role="button"> but is on regular buttons. See the following example:
<!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
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.