Having some issues with the Vue-multipane component in my specific use case and struggling to find a solution.
I'm attempting to disable the multipane feature once the screen size is smaller than 768px and switch to displaying full-width rows instead of columns for better usability on mobile devices.
However, I've encountered two main problems:
- Shrinked pane does not expand to 100% width when the screen size goes below 768px (refer to screenshots). After reducing the width of the pane with the handle, try resizing the window width below 786px to observe this issue.
- The handle disappears when the screen size is between 768 - 770px (near the breakpoint). The page break does not trigger, but the handle is not visible. Currently investigating this problem for a possible fix.
(handle missing)
When reduced to 767px (should be maximized to 100%) - shrink the pane first and then reduce the window width:
The expected layout should look like this (correctly displayed on page load):
Please take a look at this JSFiddle or review the code snippet below.
It's recommended to visit JSFiddle for easier resizing and testing of the mentioned behavior.
Troubleshooting Steps Taken:
- Added CSS styles
flex-grow: 1andwidth: 100%;within the media query of theleft-panewithout success. - Regarding the handle issue: Adjusted the breakpoint position, but the behavior persisted.
Note: Testing conducted using Firefox browser.
//console.log(Multipane, window)
const PageBreak = {
data() {
return {
screenWidth: document.documentElement.clientHeight,
}
},
computed: {
largeScreen () {
return this.screenWidth > 768; // Considering 10px for handle
}
},
mounted: function () {
window.addEventListener('resize', this.handleResize)
},
beforeDestroy: function () {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize (event) {
this.screenWidth = document.documentElement.clientWidth
}
}
}
new Vue({
el: '#app',
mixins: [ PageBreak ]
}).custom-resizer {
width: 100%;
height: 400px;
}
.custom-resizer > .pane {
text-align: left;
padding: 15px;
overflow: hidden;
background: #eee;
border: 1px solid #ccc;
}
.custom-resizer > .multipane-resizer {
margin: 0;
left: 0;
position: relative;
}
.custom-resizer > .multipane-resizer:before {
display: block;
content: "";
width: 3px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -1.5px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.custom-resizer > .multipane-resizer:hover:before {
border-color: #999;
}
.left-pane {
width: 50%;
}
@media (max-width: 768px) {
/* Stack panes if smaller than 768px */
.multipane.layout-v {
/* flex-direction: column; */
display: block;
}
.left-pane {
/* flex-grow: 1; */
/* How to maximize left-pane if it was shrinked previously? */
width: 100%;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6412110149091108100d14050a0124544a5d4a51">[email protected]</a>/dist/vue-multipane.min.js"></script>
<div id="app">
<multipane class="custom-resizer" layout="vertical">
<div class="pane left-pane">
<div>
<h6 class="title is-6">Pane 1</h6>
</div>
</div>
<multipane-resizer v-if="largeScreen"></multipane-resizer>
<div class="pane" :style="{ flexGrow: 1 }">
<div>
<h6 class="title is-6">Pane 2</h6>
</div>
</div>
<!--<multipane-resizer></multipane-resizer>
<div class="pane" :style="{ flexGrow: 1 }">
<div>
<h6 class="title is-6">Pane 3</h6>
</div>
</div>-->
</multipane>
</div>