[Vuejs]-Add page-break function to Vue-Multipane component

by

0👍

I think I’ve found a way to solve the issues. (The handle issue fix with the page break position is a bit hacky but works.)

Let me explain what I did:

  • I added class full_width to the left pane if the screen is smaller than 768px to maximize the pane to width: 100% !important with this Vue code :class="{full_width: !largeScreen}"
  • The handle was missing if I’m setting the page break position to 768px. I’ve reduced the position by 17px (looks like the padding 15px + 2px from border – but I couldn’t change this with css) then it’s working. So inside the computed property of largeScreen I’m returning it like this: return this.screenWidth > (768 - 17); (I’ve tested this by console logging the screen size.)

Please have a look at this fiddle.

I’ve you’re having an explanation to the handle issue and why it’s working if I’m changing the position by 17px – please let me know.

The solution is OK and seems to work for me. Maybe I’m filing an issue at Vue-multipane repo. for a feature request because it’s probably easier if it’s directly added in the Multipane component and it would be nice if passing the break-point with a property would work.

👤AWolf

Leave a comment