# Alignment when snapping to grid

**URL:** <https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551>\
**Category:** Feature Requests\
**Created:** [11 November 2021 08:21 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551 "2021-11-11T08:21:58Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 November 2021 11:29 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/21 "2021-11-11T11:29:01Z")

</div>

for me both the left and right edges of a named node do seem to snap to the grid  
Which version of NR are you running ?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/eb3ca5ebc12b4e7fefd7078953fc2a4e8b8e1238.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [11 November 2021 11:32 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/22 "2021-11-11T11:32:27Z")

</div>

If I change the grid to 10px I see major and minor grid lines and they are too closely packed for comfort. (Firefox)  
Is it possible to hide the minor grid lines - so it snaps to 10px but I only see a 20px grid?  
I've tried to find the CSS to achieve it but can't pin it down.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [11 November 2021 11:32 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/23 "2021-11-11T11:32:34Z")

</div>

I am running 2.1.3

I think we've now got into a word semantics issue (and I'm not the best at words) 🙂

Can I simply refer back to first post that shows that in default 20 grid mode, we can't align nodes visually evenly at short spacing intervals

I think this is due to width of nodes not being xxx (whatever xxx is) but I'm just a user here 🙂

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 November 2021 11:36 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/24 "2021-11-11T11:36:53Z")

</div>

Before:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/4056e5c21b1b338853f641b410fa1f7787552c66.png)

Select all, top-left to bottom-right & distribute horizontally - same happens if you copy bottom-right to top-left or if you select everything individually.

![Animation](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/8/b82f496845f81f754ee9c80fc3a63e890da97566.gif)

Select individual nodes bottom-right to left:

![Animation1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2faf5b051b3c21ffbdf4736e6a41e9a9912013fb.gif)

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [11 November 2021 11:38 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/25 "2021-11-11T11:38:36Z")

</div>

I see what your saying - my issue/request is about packing nodes close together

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 November 2021 11:42 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/26 "2021-11-11T11:42:14Z")

</div>

Yes, just realised that ☹

You are right, no easy way of doing that with the align features. Personally, I don't like things being too close.

I did manage to get this:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/4136fab390cf7b54a80714f0c2f56115ea9c3887.png)

But I don't know that it is easily repeatable.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [11 November 2021 11:48 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/27 "2021-11-11T11:48:27Z")

</div>

> [@cymplecy](#):
>
> Can I simply refer back to first post that shows that in default 20 grid mode, we can't align nodes visually evenly at short spacing intervals

When snap to grid is enabled, the node widths (when label is shown) snap to the grid. I can see that in your original screenshot for the first 3 cases. The four case is where snap-to-grid has been disabled.

The issue is that collapsed nodes do _not_ adjust their width to the grid - they are, as I said previously, intentionally kept square.

Placing two nodes so their ports overlap is not considered a good idea as you can't tell if they are wired together or not. Imagine the wire was accidentally deleted... how long would it take you to track down the missing wire?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 November 2021 11:53 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/28 "2021-11-11T11:53:21Z")

</div>

> [@knolleary](#):
>
> Placing two nodes so their ports overlap is not considered a good idea as you can't tell if they are wired together or not. Imagine the wire was accidentally deleted... how long would it take you to track down the missing wire?

A great exercise for a class when you have that one smart-Alec that needs an extra challange 😈

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [11 November 2021 12:00 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/29 "2021-11-11T12:00:54Z")

</div>

> [@knolleary](#):
>
> The issue is that collapsed nodes do _not_ adjust their width to the grid - they are, as I said previously, intentionally kept square.

I'm failing to communicate here

I completely understand that collapsed nodes are square and fixed 🙂

> [@knolleary](#):
>
> Placing two nodes so their ports overlap is not considered a good idea as you can't tell if they are wired together or not. Imagine the wire was accidentally deleted... how long would it take you to track down the missing wire?

100% agreed - I like to personally touch to save space but it's not a good general idea and if it can't be done then so be it 🙂

On top image, if input spacing could be made the same as the output spacing (i.e small but noticeable) then all is good AFAIC 🙂

I think it's the width of full fat nodes that's the issue. The right hand edges are being quantised as Dave shows but I don't think in a manner to make the next node line up consistently

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [11 November 2021 12:02 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/30 "2021-11-11T12:02:53Z")

</div>

> [@cymplecy](#):
>
> I think it's the width of full fat nodes that's the issue. The right hand edges are being quantised as Dave shows but I don't think in a manner to make the next node line up consistently

I simply don't see that.

With snap-to-grid enabled, as Dave shows, both the left and right edges line up to the grid. Your own screenshot shows the same.

So if both of a node's edges line up to the grid, then what doesn't line up with the next node?

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [11 November 2021 12:05 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/31 "2021-11-11T12:05:38Z")

</div>

The top image shows that if you try to pack the nodes together as close as possible, then you can't get the gaps to visually be the same.

That's as succinct as I can put it

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [11 November 2021 12:08 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/32 "2021-11-11T12:08:59Z")

</div>

That is because the right-hand edge of collapsed nodes do not align to the grid.... which is because collapsed nodes are square, and have their left-hand edge aligned to the grid, so their right-hand edge is not aligned to the grid.

Which is why I suggested we could look at allowing the snap to grid to allow a collapsed node to align to either its left edge (as today) _or_ its right edge.

That would allow you to get the gaps between the nodes to match.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [11 November 2021 12:10 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/33 "2021-11-11T12:10:32Z")

</div>

> [@knolleary](#):
>
> That would allow you to get the gaps between the nodes to match.

Super 🙂 Sorry I didn't understand what you meant earlier

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 November 2021 12:24 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/34 "2021-11-11T12:24:12Z")

</div>

If you set the grid to 15 - then the right hand edge of collapsed nodes do line up.... and any NEWLY created nodes will also have their right hand node aligned correctly... however any "old" nodes that had their size created at (say) grid 20 won't suddenly resize to refit the grid. So you need to set the grid first - then add your nodes to your flow.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [11 November 2021 12:41 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/35 "2021-11-11T12:41:40Z")

</div>

Not workign out at my end

I set grid to 15, created new tab and then added these fresh nodes

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/a/ea0304079b9714760718c0b33df5ecdbb43800ed.png)

Top is closest I can get without touching and isn't evenly spaced

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 November 2021 13:02 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/36 "2021-11-11T13:02:48Z")

</div>

Yes - ok - got it now... but if you want compact I still prefer  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/650c9dd16bb4b9565869d7c3c472c77b03ee383c.png)  
🙂

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [11 November 2021 13:06 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/37 "2021-11-11T13:06:13Z")

</div>

I need some sort of label to remind me tomorrow what it does 🙂

[Edit the rest is complete horlicks by me]

Can I refer back to

> [@Alignment when snapping to grid](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/5):
>
> mm - you gave me the idea to use grouping for a sequence like that [image] [edit the rest is complete horlicks by me] but slight issue in that the blue symbols show up if you just move the group frowning [image] but I think we are drifting off-topic slight_smile

and the little issue of the blue dots when you just move a group of compacted nodes

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [11 November 2021 13:07 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/38 "2021-11-11T13:07:39Z")

</div>

> [@cymplecy](#):
>
> little issue of the blue dots when you just move a group of compacted nodes

What issue? You've moved the nodes, so they are marked as having changed.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [11 November 2021 13:11 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/39 "2021-11-11T13:11:00Z")

</div>

Well - if you move a node that isn't in a group - they don't get marked as being changed  
[edit complete horlicks by me]

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [11 November 2021 13:13 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/40 "2021-11-11T13:13:35Z")

</div>

> [@cymplecy](#):
>
> if you move a node that isn't in a group - they don't get marked as being changed

Yes they do.

[Previous page](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551.md?page=1)

[Next page](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551.md?page=3)