Normal and icon-only buttons in controlgroups contained in footers do not have the same height #7266

Closed
jeremyhill-up opened this Issue Mar 21, 2014 · 1 comment

Projects

None yet

2 participants

@jeremyhill-up

I'm testing against 1.4.2. Here's the JSBin: http://jsbin.com/fovacezo/1

That is:

  <body>
  <div data-role="page">
    <div class="ui-content" role="main">       
      <p>Page content</p>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
      <div data-role="controlgroup" data-type="horizontal">
        <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
         <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
         <a href="#" class="ui-btn ui-corner-all">No icon</a>
      </div>
    </div>
  </div>
</body>

The 'no icon' anchor button is 36px tall and the icon are 45px.

A few misc notes:

@jaspermdegroot jaspermdegroot added this to the 1.4.3 milestone May 1, 2014
@jaspermdegroot jaspermdegroot self-assigned this May 1, 2014
@jaspermdegroot
Member

@jeremyhill-up

Thanks for reporting the issue. This is indeed a bug in the CSS.
We have to add this rule ...

    .ui-header .ui-controlgroup .ui-btn-icon-notext,
    .ui-footer .ui-controlgroup .ui-btn-icon-notext {
        font-size: 12.5px;
    }

... here: https://github.com/jquery/jquery-mobile/blob/master/css/structure/jquery.mobile.core.css#L253

See: http://jsbin.com/fovacezo/4/edit

We will fix it in next maintenance releaser (1.4.3), but you can already add it to your own CSS to resolve the problem for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment