The title of a table, a flexcontainer, consists of two parts:
- Label of the title
- Toolbar (buttons and burger menu)
If, for example, the title label takes up 70% of the size and the toolbar 20%, then the user can reduce the window so that the table loses a maximum of 10% of its width without noticeably changing the display. Any reduction in size beyond the 10% reduces both parts of the title to the same extent. This ensures that the toolbar including the buttons is displayed in multiple lines in the worst case. This is unattractive. The label of the title is "truncated" and styled using text-overflow ellipsis.
Implementation
The toolbar, a flex item, must not become smaller than its content. Therefore, above a certain size, only the label of the title is reduced in size.
Test
Select a DemoTypes:A item and navigate to the priority table. Go into edit mode and reduce the width of the window. The toolbar must not be displayed in multiple lines.