googlearchive / core-toolbar

Basic toolbar
7 stars 10 forks source link

Layouts seem to be only partially functional inside core-toolbar #11

Closed albeec13 closed 9 years ago

albeec13 commented 9 years ago

For example:

<core-toolbar layout horizontal center-justified center>
     <div flex>Some Text</div>
     <div>Some More Text</div>
</core-toolbar>

While horizontal, center, and center-justified seem to behave properly, the flex on the first div does not seem to be honored.

frankiefu commented 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

albeec13 commented 9 years ago

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.

frankiefu commented 9 years ago

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>
albeec13 commented 9 years ago

Excellent. I'll try it out. Thanks.

albeec13 commented 9 years ago

@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.