Closed albeec13 closed 9 years ago
The content you place inside the core-toolbar
is projected and put in a center horizontal layout
div. So you should just do this:
<core-toolbar>
<div flex>Some Text</div>
<div>Some More Text</div>
</core-toolbar>
More info here: http://stackoverflow.com/questions/26060221/cannot-justify-elements-inside-coretoolbar?answertab=votes#tab-top
While that seems to work, it doesn't properly justify the elements unless they happen to be the same length. For 2 elements, it's fine, because it pushes them to either side of the bar, but for 3 or more, the centering is completely off. For example (http://jsbin.com/wihoredilefo/1/edit?html,output):
<core-toolbar>
<div flex>Foo</div>
<div flex>BartenderizeringBartenderizering</div>
<div>Bazooka</div>
</core-toolbar>
Here, the center element is not justified properly, but shifted to the right, and even bleeds into the rightmost element if the width gets narrow enough.
Compare this to (http://jsbin.com/yicegedibudi/1/edit?html,output):
<div layout horizontal justified>
<div>Foo</div>
<div>BartenderizeringBartenderizering</div>
<div>Bazooka</div>
</core-toolbar>
Here, the elements are evenly distributed horizontally.
Fixed by https://github.com/Polymer/core-toolbar/commit/7cfe7bc9d5c69b58cec50187fbde5b3c5e405fbf. You can now use "justify" property to control how the items are aligned. e.g.
<core-toolbar justify="between">
<div>Foo</div>
<div>BartenderizeringBartenderizering</div>
<div>Bazooka</div>
</core-toolbar>
Excellent. I'll try it out. Thanks.
@frankiefu I tested out your change, and it works, but there was a minor bug where only 1 justify type was being applied to top, middle, and bottom divs in tall
or medium-tall
core-toolbar modes. I've submitted a fix and pull request. Thanks again.
For example:
While
horizontal
,center
, andcenter-justified
seem to behave properly, theflex
on the firstdiv
does not seem to be honored.