Buttons overflow

[jerone]

When exceeding the amount of buttons after the window width, buttons will overflow onto a new row in horizontal mode (see screenshot):

Buttons that exceed the window height in vertical mode, even disappear (see screenshot):

[jerone]

Possible solutions:

1. Increase (flexible) ToolBar width/height.
2. Inherit from ScrollView instead of View and make the ToolBar scrollable.

[suda]

I would vote for adding another row/column of buttons when they don't fit by adjusting the width/height

[jerone]

So I thought this would be easy, but it isn't for some reason 😞

The following code adds another row on the toolbar for position top and bottom:

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;

When changing to left and right position however it does something weird. In above code I changed the flex-direction to column, but still the toolbar won't stretch to allow buttons to overflow to the right (screenshot 1). Adding width: 100%; to the parent atom-panel allows the buttons to overflow but with more width then is necessary (screenshot 2). The extra width seems to come from the minimum size is needed for all buttons to fit when minimizing the window. Why?...

no width	width: 100%;

@simurai I was hoping you could chip in as CSS expert and fellow Haarlemer 😊

[jerone]

Online demo if anyone wants to help: http://output.jsbin.com/vimihurelo/1

[simurai]

Hmmm.. yeah, somehow the width of the flexbox stays like there would be no wrapping. Probably a bug.. maybe same as this inline flexbox bug: https://code.google.com/p/chromium/issues/detail?id=247963

Maybe in the meantime it could wrap top/bottom, but overflow-scroll when left/right? Like https://github.com/jerone/tool-bar/pull/1

---

@jerone You live in Haarlem? Damn.. I lived there a few years. Super nice town.

[jerone]

@simurai commented on 26 mei 2015 07:21 CEST:

Hmmm.. yeah, somehow the width of the flexbox stays like there would be no wrapping. Probably a bug.. maybe same as this inline flexbox bug: https://code.google.com/p/chromium/issues/detail?id=247963

Looks like the same bug. Weird that both Chrome and Firefox do it 'wrong', while IE expands the container correctly. Anyways, subscribing to that issue...

Maybe in the meantime it could wrap top/bottom, but overflow-scroll when left/right? Like https://github.com/jerone/tool-bar/pull/1

Making left/right scrollable was my fallback too, and as it stands will be a good solution. I'll have a look at your PR tonight. Thank you very much for checking.

---

@jerone You live in Haarlem? Damn.. I lived there a few years. Super nice town.

Yeah, born and raised, in North, near the ice skating rink. "Waarom heb je in Haarlem gewoond? Vanwege werk?".

[simurai]

@jerone Yes, was working in Amsterdam for a few years. But I liked Haarlem more. Less tourists and more relaxed. 😄

[jerone]

@simurai Same situation. Way relaxer, and closer to the beach :P