I want to allow users to create new items in the spaces that there is no item already. I want to fill the empty spaces with items that let you create a panel there, like so:

The green panels would be draggable and resizable, but the gray ones would not be. Since adding gray items to the item array causes the green items to go crazy when trying to move them, I think the best way of doing this would be to draw two dashboards, the green one on top and the gray one on bottom. However, using position: absolute and setting the z-index on the layouts cause each item to be drawn on top of each other and each item becomes huge.

position: relative

position: absolute

Is there anything going on in the code that would be messed up by using position: absolute? Is there any way you can see to accomplish what I'm trying to do?

Hi there,
First of all thank you for sharing this wonderful library.

I would like to know, how can I save the current position of the elements in the dashboard?

Thanks in advance

Hi @bensladden,
for a specific application I would like to have the Dash Items overlappable.

User will be able to add new Items in the Layout and draw and resize them freely even if they are colliding with other Items.
Is there any way to disable the collision detection so that other Items are not moved around when the new Item is added/moved/resized?

Thank you

Thank you for the very useful library.

I am having an issue, however, where components inside dash-item are mounted twice. It seems they are mounted for the smallest breakpoint first, then destroyed, and then for the current breakpoint. You can see it in this codesandbox. I've not noticed any other reports of this, but it certainly caused some confusion in my team. Any help (or clarification) you can offer would be great.

Thanks again.

Hi

I have a problem with dynamically swapping between layouts, and have recreated the issue here

https://codesandbox.io/s/vue-responsive-dash-bvrwi

When you click the swap button it just swaps between two predefined layouts, however after you click swap twice all the boxes are moved to the bottom of the page, but they should be at the top like when it was first loaded.

I have found that the y positions are getting changed from the v-bind.sync="item" - an update:y is getting emitted for some reason and changing the layout.

This is critical to my project, hope you can find the issue.

Thanks
Peter

I didnt see anything for this in the documentation, unless I missed it
Is there a way to have a grid item autosize itself to the content's height?
My use case is fetching data from my API and populating widgets with it, so they're bound to be different heights

I am trying to use the library in a nuxt project with SSR, but when installing the library it generates an error.
To solve this issue, I have to force the application to work SPA mode (the entire application, not only the page with responsive-dash)
I really would like very much to be able to use the library and keep the SSR functionality in the rest of the application

@bensladden Thanks in advance

Hi @bensladden,
in my application user has a button to add a new Item to a Layout.
The Layout is configured with compact:false so that the Items can be moved in the desired position and they stay there.
At the moment when the user adds a new Item this is created with x:0 and y:0 and pushed into the items list.
This works well but all other Items get moved when user adds and moves the new Item around.

I am wondering what is the best way to calculate the new Item x,y properties so that the new Item is located at the bottom of the layout. Let's say at x:0 but with a y such that it appears just below the last Item already present.

Is there any Layout property that could be exported? Something like Layout.maxheight that could give the actual maximum used height?

Or the only way is to scan the items list and find out the maximum y+height among all Items?

Thank you for any insight.

Hello,

is there any way to force item width not to be more wider than Dash Layout?

For example:
On lg breakpoint we have numberOfCols: 10, but item width: 12 so it goes out of bounds.
Sandbox: https://codesandbox.io/s/vue-responsive-dash-eggbc?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.vue

Hi
I just opened the main page in on phone and dragging is not working.
I tested with Firefox Mobile (Chrome and Opera had time out error!)

If I resize items multiple times sometimes placeholder div could not disappear. Here is an example image;

In the scenario of having an interactive item (a chart with drag to see more values, etc.) this package should have a way to disable those elements to trigger a drag on DragItem component.

The same you have for dragAllowFrom, you should have a dragIgnoreFrom prop that will set the ignoreFrom on the interactiveInstance initialization options.

When I try to drag and drop quickly, the layout can often get to where two items overlap or the red item shows when I am not clicking anymore.

Examples:

Hi! I'm trying to put responsive tables with scrollbars and selects to choose what columns to display inside dash items but the drag event in items overrides the normal function of scrollbars and select elements make them unusable.

Thanks for your code, looks great!

Hi.

Your component works well. I have a specific need.

About the event moveEnd event, I received the event for dropped item. But when I dropped it, other items were moved too.

Is there a way to know when other items moved ?

Hi,

I am unsure this is the right way to ask.

I have been tasked with updating an app which relies on vue-grid-layout.

We are puzzled by the decrease in activity / support witnessed on vue-grid-layout, and wondering whether it would make sense to make the effort to move to vue-responsive-dash, which looks great.

Hence our question: is there a place where you wrote why you decided to start this repo, and how you think it will evolve. I haven't been able to find an answer on the doc.

Thanks a lot, great work, Thib

Hey it is easy or possible to add a feature to avoid one DashItem from moving out of this position if the draggable, resizable is set to false?

For example I may have something like this:

<dash-item id=1 draggable=false resizable=false/>
<dash-item id=2 draggable=true resizable=true/>

When I drag the item 2 to the place of item 1, the item one shifts its position to the next available slot... Ideally, I would like the item 1 to always stay at the given coordinates 0,0 and not allow item 2 to ever be on its place.. does it make sense?

[interact.js] The "@interactjs/*/index" packages are not quite stable yet. Use them with caution.

Hi
I have started getting the following error when changing layouts dynamically since updating to 0.3.26
Do you have any ideas ? If not, I'll try and replicate the issue in https://codesandbox.io/ so you can have a look, hopefully I will be able to replicate the issue in a simple case.

I get the error when changing from one set of layouts to a completly separate set of layouts at the same breakpoint (screen size). The id's are different so its not a duplicate id issue. The crash caues the debug view not to update, but the error still occurs with debug turned off.

TypeError: Cannot set property id of #<DashItem> which has only a getter at VueComponent.handler (vue-responsive-dash.common.js?e6d2:10032) at Watcher.run (vue.runtime.esm.js?2b0e:4568) at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310) at Array.eval (vue.runtime.esm.js?2b0e:1980) at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

Hi Ben, love your work.

I've had great success with a global lock/unlock button toggling the locked property of each DashItem.

However, on devices with touch screens, scrolling is prevented whilst attempting to start a page scroll from a locked DashItem.

I hope I've explained the issue clear enough.
Any help would be much appreciated.

Hello bensladden,
I am very interested in this component. However I cannot find any example of how to render some simple user-defined components inside the dash-item component.
It is mentioned that this shall be done using scope but I think some examples with a one or two simple user-defined components like a static text or an SVG icon could be very helpfull.
I am interested in understanding how a user component can be istantiated multiple times in different dash-items, having different sets of props in each istance and having this stored in data.

Thank you

So I just found this component today and I really love it. It is simple to use and works pretty well.
But I really miss the option to set a minimum width and height vor Grid fields and also for items.
I am creating a currently nesting grids so that within an Item, there is another grid with just one column but each of the nested items do have same height as width and this is a bit annoying :)

Is this already planned for future and can I look forward to see this feature soon?

Greetings
Jan :)

Anyone has found an alternative working with Vue3?

When I remove items from the grid the layout seems to adjust it self, but when I put the item back it stays the same, but if I start dragging any item it just reajust it self and fits perfectly.

There is a way to force the grid to reajust it self?

Like a refresh, so I can trigger in my watch event?

Cheers, nice work on the lib.

Will this work in Vue3? I tried but am seeing: "TypeError: cb.bind is not a function" error in console.

I would like to be able to add a panel without it rising to the top.

Example:

I got this by setting draggable and resizable to false, but once I can move them, the item rises to the top.

I made a nice dashboard based on vue-responsive-dash with use of the apex-charts. See my screenshot bellow. This is a start for a dynamic dashboard where user can define each dash-item with any chart they can make. It all works. Now I've a question about the loading.

Each dash-item has a 'loading' section. Code wise it looks like this.

<div` v-if="bIsLoadedChart && bHasData" class="full-height">
<apex-chart-dash-item  :width="'100%'"  :height="'100%'" :type="oChart.type" :chartOptions="oChart.options" :series="oChart.series">
</apex-chart-dash-item>
</div>
<div v-else-if="bIsLoadedChart && !bHasData">No data...</div>
<div v-else class="full-height full-width">
<q-spinner-hourglass color="primary" style="position:relative; top: calc(50% - 2em); left: calc(50% - 2em);" size="2em" />
</div>

In the created of the template data is collected, labels made etc etc. When done, bIsLoadedChart is set to true. However, it seems that the chart is not appearing untill all the charts are ready. I verified this for the middle one (with the person icon) and right column number 3 and 4 actually don't need datafetching so when the template is created it is ready to be shown.

Is there something I can do to influence this behaviour?

Hi, Ben.

I found a typo.

this.$emit("hovenEnd", this.item); => this.$emit("hoverEnd", this.item);

Thank you.

Hi @bensladden,
from the documentation Layout.resizable should make the item resizable while Layout.draggable should make the Item draggable.

At the moment it seems that both features are tied togheter on the Layout.draggable prop while Layout.resizable does nothing.

Hi

I am trying to get dragging a item from a list into dashboard and have it automatically add the new item and also go into moving mode without having to let go of the mouse button. So i can drag into the postion i want.

I have got the dragging working and the auto creating the dash-item, but i am having trouble going directly into move mode.

Here is a sample of where i am up to, you can drag the item at the top into the dashboard and it creates the dash-item, but if you continue to move the mouse around without letting of the mouse button, it doesnt drag the new dash-item around. (Not at least unles you let go and click mouse down again - which i am trying to avoid)

https://codesandbox.io/s/vue-responsive-dash-wn52w

Note i am using a simulate mouse function to try and trigger the change to move mode, but the mouse event doesn't seem to do the trick.
Do you have any suggestions on how to go into move mode from javascript ?

Thanks
Peter

It seems that displaying the red placeholder panel permanently moves the other panels, even if the item doesn't get dropped there. With the new compact prop, it would be nice if the items array doesn't get permanently changed until the item drop.

Example:

1. before move
   

2. moving rightmost top panel to leftmost top position
   

I would want the general and description panels to move down, but I would want the background panel not to move.

Hi, we're enjoying this library, thanks for creating it! We need to make only the top part of a dash item draggable because we have other UI going on inside the item. What I did as a hack was just to select the drag listener for each dash item in CSS and resize it like so:

.item > div:first-of-type {
    bottom: auto !important;
    height: 24px !important;
}

This works, but I would rather be able to define specific styles with a slot for the drag handle like we can currently do with the resize slots. Seem like a heavy lift?

Thanks again!

Currently, this library works when having empty panels that you are moving around. It seems that if you have content inside the panels, to move, you need to actually grab the panel background.

Example:

When I put an overlay over the panel, I have to grab the pixel of white border to be able to move the item. The button also doesn't let me move the panel either.

How to fix the item unchangeable
use locked=true
https://codesandbox.io/s/vue-responsive-dash-forked-wg10b?file=/src/App.vue

Hi, I found this a good library to display responsive tiles in a grid though I'm having an issue while adding a new item into dash layout. I want to add a new item by clicking a button, it works well until I don't resize the item. After spending a few hours I figured out the placeholder item places itself just after the first item.

You can reproduce issue here:
https://codesandbox.io/s/vue-responsive-dash-wbgs8

Steps:

1. Click "Add" button and add first item.
2. Resize the added item.
3. Click "Add" button to add another item.
   Note: See the space between first and second item.

Is there something I can do to influence this behaviour and remove this space?

Hi @bensladden, is there a way to implement an edit mode functionality to this? Where by clicking a button, I can decide if the containers can be moved or resized and if it's in a viewing state, then I can't move or resize them?

Hello! Please excuse me if this isn't the correct place to ask.

Dash item resizing event only occurs on user interaction.
Are there any events/methods to get resize data when the window is resized?

I'm drawing some svgs using d3.js https://d3js.org/, and I'm trying to pass in the dimensions of a dash item.
The results are great when resizing via handle and using the data from the resizing event - I'm hoping to somehow get the same effect when resizing the window.

Regards,

Matt

Hi guys, I loved your framework, really easy to use, but when I tried using on mobile or simulating mobile with chrome devtools it just doesn't work.

You guys are working on it? Because it's really a deal breaker now a days.

Hi, bensladden.

key: "id",
get: function get() {
return this._id;
},

=>

      set: function set(id) {
        this._id = id;
      }

Hi

I found a strange case where the positions of the dash-items are not where they are meant to be from the layout config.
see example

https://codesandbox.io/s/vue-responsive-dash-fhkwx?file=/src/App.vue

The box 2 should be at the top at y=0 however it is positioned at y=6
in code it is
items: [
{ id: "1", x: 6, y: 3, width: 6, height: 3 },
{ id: "2", x: 9, y: 0, width: 3, height: 3 },
{ id: "3", x: 0, y: 0, width: 8, height: 3 },
]

in debug it is
{"id":"2","x":9,"y":6,"top":386,"left":573,"width":3,"widthPx":178,"height":3,"heightPx":178,"draggable":true,"resizable":true},

There seems to be enough space at the top for it to fit.

I also found if i changed the order it seemed to fix it, e.g. following seems to work.

      items: [
        { id: "3", x: 0, y: 0, width: 8, height: 3 },
        { id: "1", x: 6, y: 3, width: 6, height: 3 },
        { id: "2", x: 9, y: 0, width: 3, height: 3 },
      ]

In my case the order is user defined so I can't control the order of the items, so this is an issue for me.

Hopefully you can find a fix.

Regards
Peter

I'm not sure why I can't seen to get this component to work ... coping and pasting the example results in a nothingness .. inspecting the layout instance I noticed that is due to the breaking point always being null:

How is this breakpoint calculate and why it is null?

I was wondering if there is a way to not pass the X and Y for the DashItem and the DashLayout should compute where it should be placed.

In my application I have several cards with diferente sizes and the user can add and remove them dynamicaly, If I could just append it to the "items" it would be awesome, in addition it would solve the problem for different breakpoints/"viewports sizes".

I have to get dlayout model to save, however there is no change in dlayout model after resize or move objects. By the way, if I change to debug mode, I can show changes as json. How to get dlayout model?

Hi,

I wonder after updating my dashboard how to update my state on my vuex store.

Hi, this project is exactly what I was looking for, but unfortunately your demo bugs out completely on my Windows machine. I've tried both Firefox and Chrome. It works perfectly on my Mac though.

I've copied and pasted the example code into a blank file in my vue project. I'm getting the warning:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Also, none of the elements are getting shown. It's just a blank page.

Hello bensladden,
thank you very much for your continued effort in developing such a nice module.

I am trying to fire a dblclick event so that a configuration window opens up when the user double clicks on a dash-item.
So far I had no luck.
Is there any example I can use?
I am also trying to fire a click or a contextmenu event but nothink happens either.

Thank you very much for any help.

Hello,
is there any possibility to change the space between items.
For a specific application I would like to have the items to touch each other with no space in between.
I have seen that there is a 'margin' prop in the Dashboard but is seems not used.

Thank you very much.

Hello, I really like your library, I want to use it for my project, but I ran into the fact that the grid does not respond to changing the width of the elements, is there any way to make the grid rebuild?

I'm applying sandbox:
https://codesandbox.io/s/vue-responsive-dash-forked-mwkjb

Steps to reproduce the problem:
1.click resize button
2. see error

I apologize in advance for the English, I am from Ukraine
Please, I beg you to help me with this.