Quasar: Splitter resizing breaks when changing :horizontal state

Created on 26 Aug 2020  路  3Comments  路  Source: quasarframework/quasar

Describe the bug
If you bind the horizontal property of the QSplitter, then it is not possible to resize to a lesser value then what it was set to when the horizontal state updated.

Codepen/jsFiddle/Codesandbox (required)
https://codepen.io/MIDIBlocks/pen/PoNpREb?editors=1010

To Reproduce
Steps to reproduce the behavior:

  1. Create a splitter like: <q-splitter v-model="splitterModel" :horizontal='isHoriz'> (see: https://codepen.io/MIDIBlocks/pen/PoNpREb?editors=1010)
  2. Resize the splitter
  3. Click the "Flip" once at the top of the view
  4. Try resizing up
  5. Notice how the more you drag up, the more it resizes downward

Expected behavior
Resizing up after flipping horizontal should resize upwards and not downward

Screenshots

Platform (please complete the following information):
OS: Windows 10
Node: 12.x.x LTS
Browsers: Chrome

bug

Most helpful comment

Thanks for reporting this regression.
Fix will be available in Quasar v1.13.2. When this is released, please remove the key (workaround suggested above).

All 3 comments

@MIDIBlocks Use a key on your qsplitter that changes as you set horizontal.

note that the docs example didn't take into account if you are setting it to horizontal or dynamically, so you'll have to adjust the classes as well according to the changes. here's how you do it.
https://codepen.io/metalsadman/pen/wvGejdq

Thanks that fixed it!

Thanks for reporting this regression.
Fix will be available in Quasar v1.13.2. When this is released, please remove the key (workaround suggested above).

Was this page helpful?
0 / 5 - 0 ratings