hbox layout: First item = min width, second item = max width?
hbox layout: First item = min width, second item = max width?
Hi,
I was wondering earlier today how I would go about using the hbox layout (which I assume is the right one for this instance) in rendering a layout that contained two items.
The first item was a Panel, and within the Panel would be a variable-width amount of items (and so the panel should resize itself to a certain width automatically - I had hoped).
The second item was another Panel, but I wanted it to take up the remaining width of the container.
I tried simply adding the first panel with no flex or fixed width attribute, and then tried placing the second panel with flex: 1 to try and take up the remainder of the space.
The results were not desirable; instead of the first panel just taking up 'enough space' that it needed to show its inner contents, it was either hidden because of the second flex: 1 or some other problem.
What is the correct way to:
* Show two columns in the container
* The first column should take up as least amount of space as possible (depending on its item contents - which also may be dynamic in width, etc)
* The second column should take up the remainder of the space
I get the feeling I need to tell ExtJS that an item should either have a fixed width, or tell it to take up a ratio of the available container space. There doesn't seem to be a way to say 'take up as much space as you need, but nothing more'.
I'd like it to use whatever logic the browser users - for example:
1) The left item is a table (actually, is a Panel with table layout) and it contains a few rows/columns. I'd like this to be as large as possible but nothing larger.
2) The right item can take up the full width.
If I simply had two div's (or perhaps the first was a span with display: block) and floated them to the left; it would work as expected.
hbox layout: First item = min width, second item = max width?
Reply With Quote
