Issue with line-height: 1

[matthewpull]

I have code that was working before I updated paper-toolbar, but is no longer working. It seems that the update to line-height is to blame, as disabling the property fixes my issue.

Basically, the problem is that I have the text "Organiser Dashboard" displayed as a title inside of a paper-toolbar, but the bottom of the 'g' is being cut off. Disabling line-height (or even overflow: hidden) fixes the issue, but I do not want to have to edit my copy of the element itself, as this will cause it to get out of sync with the official release.

Can someone please confirm that this is an issue, and suggest a workaround (if possible)?

Thanks, --Matt

[ebidel]

line-height was introduced here: https://github.com/PolymerElements/paper-toolbar/commit/645909293973032fac1b141a37e7fbab7f2f577e#diff-c039fb2eac608d42d39d9165a1afba13R209

cc @blasten

[matthewpull]

I have just checked, that commit is indeed the one that breaks my code. I understand that it reads 'fix line-height', but I do not see how setting the line height to 1 fixes anything. I have also checked with the starter kit, and you can have text cut off even using a fresh install of that. Disabling 'line-height: 1' fixes all problems.

[blasten]

@matthewpull the idea was to fix this issue: https://github.com/PolymerElements/paper-scroll-header-panel/issues/66. This element now has a mixin that you can use to style the title.

paper-toolbar {
  --paper-toolbar-title: {
    line-height: 40px;
  };
}

[matthewpull]

@blasten just tried it, works a treat. Thanks for the tip!

[ronnyroeller]

I'm running into the same issue. Here is a Stackoverflow answer explaining why setting line-height:1 with overflow:hidden is breaking titles containing characters like "y", "g", "j", etc: http://stackoverflow.com/a/10183902