Skip to content
This repository has been archived by the owner on Dec 19, 2017. It is now read-only.

paper-menu-button misaligned if inserted in core-toobar #57

Open
fedy2 opened this issue Oct 15, 2014 · 4 comments
Open

paper-menu-button misaligned if inserted in core-toobar #57

fedy2 opened this issue Oct 15, 2014 · 4 comments

Comments

@fedy2
Copy link
Contributor

fedy2 commented Oct 15, 2014

I'm using a paper-menu-button inside a core-toobar but it is a pixel under the middle line (in some cases they become two) making it misaligned with other elements.

I've checked with the polymer version and it works fine.

Here the Polymer example where a paper-menu-button and a core-icon-button are side by side: http://jsbin.com/zajujegonele/1/

Here the dart-polymer code:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample app</title>

    <link rel="import" href="packages/polymer/polymer.html">

    <link rel="import" href="packages/core_elements/core_toolbar.html">
    <link rel="import" href="packages/paper_elements/paper_menu_button.html">
    <link rel="import" href="packages/core_elements/core_icon_button.html">

    <style>

    paper-menu-button::shadow core-icon { 
      vertical-align: middle;
    }
    </style>

  </head>
  <body unresolved >

    <core-toolbar header>
      <paper-menu-button icon="menu"></paper-menu-button>
      <core-icon-button icon="menu"></core-icon-button>
      <span flex>Company Name</span>      
      <span>Centered</span>
      <span flex></span>
      <core-icon-button icon="search"></core-icon-button>
    </core-toolbar>

    <!-- bootstrap polymer -->
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>
@fedy2
Copy link
Contributor Author

fedy2 commented Oct 15, 2014

Setting to zero the font-size of the paper-menu-button looks working as workaround.

paper-menu-button { 
  font-size: 0px;
}

@jakemac53
Copy link
Contributor

Most likely this was just fixed in the most recent version of the JS elements, and once we do a roll we will get the update as well. I messed around with it a little bit and could not figure out exactly what was causing the issue, the styles appear to be the same :(. If it is not fixed in the next roll we can revisit this.

@fedy2
Copy link
Contributor Author

fedy2 commented Oct 15, 2014

Comparing the properties of the JS versions vs the Dart one I see only a difference on the paper-menu-button heights.

Taking all the CSS properties (also the inherited one) here the differences:
JS:
-webkit-perspective-origin: 20px 20px;
-webkit-transform-origin: 20px 20px;
height: 24px;
perspective-origin: 20px 20px;
transform-origin: 20px 20px;

Dart:
-webkit-perspective-origin: 20px 21px;
-webkit-transform-origin: 20px 21px;
height: 26px;
perspective-origin: 20px 21px;
transform-origin: 20px 21px;

I hope this somehow helps.

@jakemac53
Copy link
Contributor

Ya, I can see that the height is a bit taller, that in itself is not an issue since its vertically centered but the core-icon is not vertically centered inside it. In the dart version the inherited font size of 1.3em is causing the button to be 26px tall instead of 24px tall, but the javascript version is getting this same inherited style so that is confusing. Overriding the font size to 1rem like in core-icon-button does fix it but I feel like its hiding the actual issue. Also it may be hard to get that added to the JS repo since they aren't experiencing the issue. All that being said I would still not be surprised if during the next roll it gets magically fixed...

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jakemac53 @fedy2