Vue-grid-layout: Any hint for alternative way to responsive?

[shar0]

Any example for a alternative way to responsive?
Like check screen width, and use div to layout

[gmsa]

Sorry, don't have any...

[timstermatic]

You can do this with CSS.

[gmsa]

Can you elaborate on that?

[timstermatic]

Sorry, I was addressing the OP. For instance I use:

@media only screen and (max-width: 768px) {
    .vue-grid-item{ 
       position: relative !important;
        width: 100% !important;
        top: inherit !important;
        transform: inherit !important;
    }
}

To make everything full width blocks under 768. There are plenty of options doing it this way, rather than trying to implement it in the component.

[gmsa]

Thanks. When making everything full width do you disable dragging and resizing?

[timstermatic]

In my particular scenario, no I don't. But that is because my use case is as an admin tool for creating blocks of content in the back end of my app.

On the front end I just disable dragging and resizing for all breakpoints.

The only way I could see this being made responsive from the programatic side is to implement some or all of the following.

Allow the user to specify a breakpoint at which everything jumps to full width.

Then, if the breakpoint is below this AND dragging is still allowed, just create another property called order or something similar that would allow a tracking of where this element should appearing in the order of things when the block is moved up or down.

That said, I'm not sure whether this should be the responsibility of your component. It is very good at what it does and shouldn't need to do anything else.

A developer should be able to switch out for a drag and drop component layout at smaller components without even touching the saved properties of the grid-layout.

[tripflex]

Sorry, I was addressing the OP. For instance I use:

@media only screen and (max-width: 768px) {
    .vue-grid-item{ 
       position: relative !important;
        width: 100% !important;
        top: inherit !important;
        transform: inherit !important;
    }
}

To make everything full width blocks under 768. There are plenty of options doing it this way, rather than trying to implement it in the component.

One thing regarding this, you should also set left as well otherwise the value set from grid lib will show it at an offset:

@media only screen and (max-width: 768px) {
    .vue-grid-item {
        position: relative !important;
        width: 100% !important;
        top: inherit !important;
        left: inherit !important;
        transform: inherit !important;
    }
}

The other issue i've found with this that would need to be addressed is the actual height that is being set for vue-grid-layout class. For example, if you have a single row of say 3 grid items, but you want those to stack when under certain screen width, the height on vue-grid-layout is going to be set to the height of the single row.

I'll post an update once I find a solution for this.

[tripflex]

So my solution was just to set the height to auto for now:

@media only screen and (max-width: 768px) {
    .vue-grid-layout {
        height: auto !important;
    }
    .vue-grid-item {
        position: relative !important;
        width: 100% !important;
        top: inherit !important;
        left: inherit !important;
        transform: inherit !important;
    }
}

Basically I had to use this handling for "responsive-ness" due to the numerous issues with the current responsive implementation which causes different layouts based on the browser you're using.