Revision history [back]

click to hide/show revision 1
initial version

answered 2021-03-22 16:39:08 +0800

cor3000 gravatar image cor3000

ZK Team

Here my interpretation of what you described (and maybe didn't): https://zkfiddle.org/sample/263nviu/2-toolbar-buttons-with-ellipsis

What is does is, it renders toolbar buttons normally (full length) as long as they fit into a row. If they don't fit any more it will start shortening the longest buttons first. So that shorter buttons remain unaffected by the shrinking, until necessary.

Here my interpretation of what you described (and maybe didn't): https://zkfiddle.org/sample/263nviu/2-toolbar-buttons-with-ellipsis

If you want to use 100% you'll have to specify a width around the element using 100%. In the example above the width is determined by flex-box. The content already has 100% so it's not needed to specify again.

What is it also does is, is: it renders toolbar buttons normally (full length) as long as they fit into a row. If they don't fit any more it will start shortening the longest buttons first. So that shorter buttons remain unaffected by the shrinking, until necessary.

Here my interpretation of what you described (and maybe didn't): https://zkfiddle.org/sample/263nviu/2-toolbar-buttons-with-ellipsis

If you want to use 100% you'll have to specify a width around the element using 100%. In the example above the width is determined by flex-box. The content already has 100% so it's not needed to specify again.

What it also does is: it renders toolbar buttons normally (full length) as long as they fit into a row. If they don't fit any more it will start shortening the longest buttons first. So that shorter buttons remain unaffected by the shrinking, until necessary.necessary. This is achieved by max-width: min-content. Basically the flex box would like to assign the same width to every button, but due to the max-width some are already shorter so the don't need to flex.

Here my interpretation of what you described (and maybe didn't): https://zkfiddle.org/sample/263nviu/2-toolbar-buttons-with-ellipsis

If you want to use 100% you'll have to specify a width around the element using 100%. In the example above the width is determined by flex-box. The content already has 100% so it's not needed to specify again.

What it also does is: it renders toolbar buttons normally (full length) as long as they fit into a row. If they don't fit any more it will start shortening the longest buttons first. So that shorter buttons remain unaffected by the shrinking, until necessary. This is achieved by max-width: min-content. Basically the flex box would like to assign the same width to every button, but due to the max-width some are already shorter so the don't need to flex.

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More