# 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:** 3

<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:15 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/41 "2021-11-11T13:15:36Z")

</div>

Sorry - brain overload ☹

I was swapping around so much between here and my editor and the settings menu and what constitues "align" that I'd forgotten who was on first! 🙂

---

<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:16 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/42 "2021-11-11T13:16:51Z")

</div>

Looks nice to me  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/abfdfec411c82e36674c037c05d801351497170a.png)

---

<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:18 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/43 "2021-11-11T13:18:11Z")

</div>

> [@cymplecy](#):
>
> I set grid to 15, created new tab and then added these fresh nodes

Ahh - so this is with a non-default grid size to begin with. So yes, it width snapping is hardcoded to units of 20 (the default grid size). I remember now I didn't want to just use the grid size because if someone sets the grid to something big, like 100, then their nodes would get huge.

---

<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:22 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/44 "2021-11-11T13:22:00Z")

</div>

> [@knolleary](#):
>
> Ahh - so this is with a non-default grid size to begin with

FTAOD

I'm talking about how NR behaves with default settings - Dave is the one who suggested changing grid size

---

<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:28 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/45 "2021-11-11T13:28:55Z")

</div>

> I'm talking about how NR behaves with default settings - Dave is the one who suggested changing grid size

Maybe originally - and we established that was due to the compact nodes being square and not aligning to the grid on both edges.

But your reply from an hour ago, shows the regular nodes don't adjust their width to align both edges for non-default grid width. [Alignment when snapping to grid - #35 by cymplecy](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/35)

---

<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:31 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/46 "2021-11-11T13:31:37Z")

</div>

indeed - fixing that - but maybe limiting to gridSizes up to 50 ? - would then improve matters. (even if we decline to change the default)

---

<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 15:01 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/47 "2021-11-11T15:01:25Z")

</div>

Raised PR - [set node width dependent on gridsize by dceejay · Pull Request #3256 · node-red/node-red · GitHub](https://github.com/node-red/node-red/pull/3256) to try to improve matters.

---

<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:** [12 November 2021 13:09 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/48 "2021-11-12T13:09:43Z")

</div>

@dceejay blame you for pointing me down this path 😆  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/3/d3e1a10f32c8a5c9a8cb952f28c9b04317e60b22.png)

---

<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:** [12 November 2021 13:34 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/49 "2021-11-12T13:34:48Z")

</div>

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

---

<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:** [12 November 2021 15:30 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/50 "2021-11-12T15:30:23Z")

</div>

Dare you to change that to your Christmas cards for this year Dave! 😈

---

<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:** [12 November 2021 15:33 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/51 "2021-11-12T15:33:23Z")

</div>

I think we've got a brand new game! 🤣

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [12 November 2021 17:31 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/52 "2021-11-12T17:31:30Z")

</div>

> [@cymplecy](#):
>
> Top is standard approach - OK but not equallly spaced on input and output

Hate to admit it -- but this has always bugged me, too!

The reason that the input-side wire is longer than the output-side wire (in original example #1), is simply because the square link nodes are always aligned to the grid _on the left edge_ of the link node. If this was mentioned somewhere in this looong thread, my apologies for missing it!

In my opinion, the `link in` node (and every square node that ONLY has an output port) should be right-aligned with the grid. In other words, make sure that ports with connected wires always align with the grid -- the only exception would be square nodes that have both input and output ports, since the square representation cannot have both edges fall on a default (20 px) grid line.

At least Simon and I would be happy... can this behavior be added to the new PR, please? 🙏

---

<div class="post-metadata">

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

</div>

Fascinating -- now if only the icons were little beers... 🍺

---

<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:** [12 November 2021 17:36 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/54 "2021-11-12T17:36:54Z")

</div>

> [@shrickus](#):
>
> In other words, make sure that ports with connected wires always align with the grid -- the only exception would be square nodes that have both input and output ports, since the square representation cannot have both edges fall on a default (20 px) grid line.

I'm sure you're still wading through the 50+ replies in this thread, but I do suggest something similar somewhere in amongst the rest.

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [12 November 2021 18:17 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/55 "2021-11-12T18:17:58Z")

</div>

> [@knolleary](#):
>
> 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.

Ah, thanks Nick - not sure how I missed that the first time... I guess what I'm asking is if the right-edge alignment be the default for nodes without any input ports? So dragging/dropping will just "do the right thing", so to speak.

BTW, @cymplecy -- if you really cannot wait for this "enhancement", you can always select the `link in` nodes and use `ctrl-right-arrow` 10 times to bump them into "proper" alignment 🙃

---

<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:** [13 November 2021 10:58 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/56 "2021-11-13T10:58:48Z")

</div>

These are real variations I'm currently playing with

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/25c438d97475c351bdeea086ebe9014c28f7acc3.png)

I think the bottom one with nodes touching is "legitimate" in the circumstances of a simple linear flow but I think I'll only use it when space is REALLY tight

One of advantages of this approach is that the individual node labels can be very descriptive, without taking up screen space

So you don't lose inline documentation when you back to it in 12 months time 🙂

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/18c6769dbaafa2690e7d7d8c4ffb093e064f8045.png)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [13 November 2021 11:20 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/57 "2021-11-13T11:20:28Z")

</div>

Could always use a subflow, if minimalist is your goal... 😉

![alexa](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f16328aaf1324a2cb90a1aa040419356e85fc4cb.jpeg)

---

<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:** [13 November 2021 12:34 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/58 "2021-11-13T12:34:54Z")

</div>

> [@cymplecy](#):
>
> I think the bottom one with nodes touching is "legitimate" in the circumstances of a simple linear flow but I think I'll only use it when space is REALLY tight

Just remember Nick's warning. Forget a wire in that and you will be cursing yourself for a week before you realise what you did.

---

<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:** [13 November 2021 13:26 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/59 "2021-11-13T13:26:33Z")

</div>

Good point  
But I'm only doing this when I've finished fifing and faffing around and tidying up 🙂

But I'll try and not do it as it will bite me one day and then there will be a lot of "We told you so" 🙂

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/61adb3d09f2c3cc8601da8b4bc70b16a6d93a40b.png)

---

<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:** [13 November 2021 13:29 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/60 "2021-11-13T13:29:49Z")

</div>

> [@cymplecy](#):
>
> there will be a lot of "We told you so"

... you can be sure of that 😉

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

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