Descending characters are cut-off

PolymerElements / paper-toolbar

A Material Design toolbar/appbar

40 stars 41 forks source link

Open mullens opened 7 years ago

mullens commented 7 years ago

Any title with descending characters like g or j gets cut-off

Go to the Polymer demo and modify the toolbar to contain a 'g'

Happens in both Chrome and Firefox

tommie commented 7 years ago

If I remove line-height: 1, it looks good. It was introduced in 31a2bfa. No rationale given there, so that's all I know.

ronnyroeller commented 7 years ago

Facing the same issue

raqbit commented 7 years ago

Same here, also with the 'g'

arthurevans commented 7 years ago

@blasten should know why the line-height was introduced.

The newer app-toolbar doesn't appear to have this issue. Not sure whether it would have any issues dropping into older layouts, though.

blasten commented 7 years ago

I think it was introduced to fix this bug: https://github.com/PolymerElements/paper-scroll-header-panel/issues/66. I disabled line-height:1 from devtools and didn't see any significant difference, but it could be that it is required in one of the supported browser.

This is the workaround:

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

Also, please be aware that this element is deprecated in favor or app-toolbar https://github.com/PolymerElements/app-layout

sk- commented 7 years ago

How are we supposed to know that this component is deprecated, it does not say so in https://www.webcomponents.org/element/PolymerElements/paper-toolbar nor in the old elements.polymer website.