angular-ui
Layout does not resize properly
When moving the slider before resizing strange things happen. Consider the following plunker:
- Open the plunker in a separate window
- Resize the window (make it smaller)
- Move the slider to the left
- Resize the window (make it larger)
- The ui-layout does not fill the whole screen anymore.
Similarly:
- Move the slider to the left
- Resize the window (make it smaller)
- A horizontal scrollbar appears (the ui-layout takes up too much space)
It can be fixed, by setting one of the layout containers to central (see plunker). So the current behaviour is that when the window is resized, all containers keep their size (and thus overflowing) unless at least one of the containers is set to central. An overflow can still be produced, when scaling the left (red) container to a bigger size and resizing the window so that it is smaller than the container. I would suggest the following improvements:
- Improve documentation to reflect the current layouting behaviour in more detail
- Provide a layouting option that resizes the containers proportionally (according to their current size, including auto sized containers)
- Provide a layouting option that resizes the container proportionally, but first resizes auto-sized containers until their size is 0 and then starts resizing containers proportionally.
Since I need this feature soon, I can help with implementing it.
Before I start on this, I would like to agree on a resizing semantics with the project maintainers. Because it's a topic that is not so clear how to do it right and I think it makes sense to discuss it through before committing to something. What makes it complicated is the fact that an auto-sized container can have a min/max width. We need to find an algorithm, that scales auto-sized containers until their min/max width in a way that makes sense. There will still be cases where the bug in this issue appears. Consider for example the case where there is an autosized container with a max-width of 50%. When we scale the other container which is not auto-sized to < 50%, there is no way the ui-layout can fill the whole 100%.
It looks like if we don't drag splitter, there is no issue existed. Right?