option "responsive" not working
KsslJan opened this issue · 6 comments
Expected Behavior
When resizing the window, the items should reorder and be displayed.
Current Behavior
The items overlap as soon as the window width is decreased.
Steps to Reproduce
- Open example 7 ("responsive breakpoints") on the documentation website.
- Decrease the window width.
Release version: 1.2.6
responsive.bug.mp4
FYI I have tried to get it to work locally, without any luck yet.
Edit: managed to install the build tgz was in the package json.
"vue-ts-responsive-grid-layout": "file:vue-ts-responsive-grid-layout-1.2.2.tgz",
I wanted to check out the project to see what can be done regarding this responsive issue, but having problems installing the dependancy
Send me the project you are using so i can debug it properly. This error is the first one spotted
Its in the main branches package.json
Also regarding the responsive issue, in the dev branch its working, also in the main branch the layout is getting calculated properly (the new positions) but the grid items dont take the positions.
The problem seems to be in the events:
export enum EGridLayoutEvent {
BREAKPOINT_CHANGED = `breakpoint-changed`,
CHANGED_DIRECTION = `changed-direction`,
COLUMNS_CHANGED = `columns-changed`,
CONTAINER_RESIZED = `container-resized`,
DRAG_END = `dragend`,
DRAG_MOVE= `dragmove`,
DRAG_START = `dragstart`,
LAYOUT_BEFORE_MOUNT = `layout-before-mount`,
LAYOUT_CREATED = `layout-created`,
LAYOUT_MOUNTED = `layout-mounted`,
LAYOUT_READY = `layout-ready`,
LAYOUT_UPDATED = `layout-updated`,
LAYOUT_UPDATE = `layout-update`,
}
the layout-update event should be called something like update:layout as on the component v-model:layout is being referenced
also the logic that is reseting back to the old layouts when the window is growing was removed:
if(breakpoint && layouts[breakpoint] && !distributeEvenly) {
return cloneLayout(layouts[breakpoint]!);
}
// Find or generate the next layout
let layout = orgLayout;
const breakpointsSorted = sortBreakpoints(breakpoints);
const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));
for(let i = 0, len = breakpointsAbove.length; i < len; i++) {
const b = breakpointsAbove[i];
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if(layouts[b]) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
layout = layouts[b];
break;
}
}
Created a branch to fix the issues, but got no permissions to push. Guess im doing something wrong.