New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Comments

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 1, 2014

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.

Member

jaspermdegroot commented May 1, 2014

@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