Widget groups overlapping each other

node-red / node-red-dashboard

A dashboard UI for Node-RED

Other

1.31k stars 453 forks source link

Widget groups overlapping each other #484

Open tanerpaca opened 5 years ago

tanerpaca commented 5 years ago

What are the steps to reproduce?

Use the linked flow with Uptime group width=7. In this case some groups are overlapping until a certain zoom level forces to rearrange. When Uptime group size is changed to 6, the issue is gone. All other groups have size=12. https://gist.github.com/tanerpaca/44546df16c7038043b3411eaedb0d7f6

What happens?

Groups are overlapping each other making some groups almost invisible.

When Uptime group size is 7:

When Uptime group size is 6:

What do you expect to happen?

All widget groups to be visible without overlapping

Please tell us about your environment:

[x] Node-RED-Dashboard version: 2.14.0
[x] Node-RED version: 0.20.5
[x] node.js version: 10.15.3
[x] npm version: 6.4.1
[x] Platform/OS: Docker version 18.09.4, build d14af54 on Debian Stretch
[x] Browser: Firefox, Chrome

dceejay commented 5 years ago

Yes the layout algorithm isn't perfect and can be confused by odd sized groups. As you have found the best workaround is to use consistent width groups. Similar to #249

tanerpaca commented 5 years ago

Thanks for the update. As #249 was closed with a merge, I thought it was fixed and this is new, but after digging in realized that it wasn't...

wongnam commented 5 years ago

Here, I would like to add a little issue regarding colour picker which is overlapped on the sidebar.

screen shot

Patriciawa commented 4 years ago

Indeed when using consistent width groups, it works flawlessly. Maybe there could be an option added that adds the ability to display groups/widgets in percentages instead of fixed pixels? This could hugely improve responsiveness.

dceejay commented 4 years ago

The layout algorithm was created before options like css-flexbox and more modern layout engines were available, and as such works off pixel sizes. Re-coding it to also cope with percentages would require significant effort that we don't really have time for at present. More than happy if someone wanted to have a go and try to come up with something. The current layout is controlled by the Masonry controller in ui-masonry.js.

Patriciawa commented 4 years ago

Where can I find the ui-masonry.js? I can see it in github, it's here; src/components/ui-card-panel/ui-masonry.js but when searching in node-red-dashboard in node_modules inside the .node-red directory I can't find it. I'm new to this kind of stuff, could you help me locate it?

dceejay commented 4 years ago

it gets minified into the app.min.js file in the dist/js folder by the gulp script when the project gets built.

janvda commented 2 years ago

@dceejay I am also facing a case with overlapping widgets.

As workaround here above it is mentioned to use "consistent width groups". What is exactly meant by "consistent width groups" ? I am happy to change the width of my dashboard groups to make it consistent but I don't know when it is consistent or not.

FYI here the example:

I have manually drawn red boxes around the 2 overlapping groups.

dceejay commented 2 years ago

by consistent I mean all groups having the same width... So in your case the "completion response" one and the "ferrochroom" are not the same as the others