I’ve been learning the webix framework for about a week and am, on the whole, very impressed by its clean, elegant design.
There is one thing that appears to be missing: flow layout. One way to make a UI responsive to different browser widths is to string text boxes and other basic input widgets together in a left-to-right arrangement and use a word-wrap algorithm to move widgets that would go past the right edge of the browser down to a next line, the way paragraph text does on most web pages.
The closest I’ve been able to come to approximate this without hacking the framework is a rows:[] collection with a cols:[] collection of widgets in it. Problem is that when the first widget gets bumped out of the cols:[] and up into a new row, it expands to 100% and looks … weird. In word wrapping, you move the right-most words down to the next line first. You don’t move the first words in the paragraph up to a new line. Moreover, the layout containers desperately want to stretch the controls out to fill 100% of the page width when this isn’t always desirable. One result is that the whole page may shrink to less than 100% because the layout engine is trying to leave no visible space on the right.
First question is: is there a way to do flow layout that I’m missing? If not, may I request it as a feature for the future? I suspect the engineer(s) who designed the elegant layout engine for webix considered and then dismissed this feature because of the explicit calculations involved in layout and the possibility of slowing everything down. But keep in mind that web browsers already have this built in.
One use case for this feature is with a classic search page with query parameters on top and a search results grid on the bottom. The query parameters generally are independent of one another and so can be tightly packed into whatever horizontal space is available on the page, flowing down as needed. Ideally, there would be an expand/collapse button to shrink the vertical space used, too.
Another use case is a lengthy data entry form with many discrete fields of text, dates, check-boxes, etc.