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

<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 08:21 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/1 "2021-11-11T08:21:58Z")

</div>

Just a discussion....... 🙂

I'm loving new link return mode BTW

I like to compress my flows to save screen real estate but I have a bit of OCD when doing it 🙂  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/e/4ef8abbbc79da1740692e01a9a7438261e6f2559.png)

Top is standard approach - OK but not equallly spaced on input and output  
2nd - works lovely on the input 🙂  
3rd - can't align the link return with end of previous node  
4th - If I switch to non-snap to grid mode (Which I don't want to do) even then, it's very tricky to align things up

Luckily I don't have 100% OCD and I can always switch to non-snap, align everything up the way I want it, group the nodes and then turn off the border but that's a LOT of work 🙂

I think its been a while since we've had a bit of love for the basic UI and what with the season of goodwill approaching ...... 🙂

PS wouldn't mind a bit of bending on the wires as well .............................

---

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

</div>

Change the grid size to 15

---

<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 08:29 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/3 "2021-11-11T08:29:13Z")

</div>

Nice one - close, but no coconut

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

And a little bit inconsistent - just a little 🙂  
The top one is very nice but doesn't handle a final squeeze

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

Of course, I can see a very good argument for having a small piece of wire showing so maybe touching should be considered verboten

---

<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 09:24 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/4 "2021-11-11T09:24:07Z")

</div>

and you can of course shrink all the nodes if you like - then the issue of how long the label is goes away  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/7/57623bfd88c82ac0185f02c2f596cc093109ffb9.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 09:45 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/5 "2021-11-11T09:45:16Z")

</div>

mm - you gave me the idea to use grouping for a sequence like that  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5cd08b3c078b6da9f99b34dbcf490059c0d8e28a.png)  
[edit the rest is complete horlicks by me]  
but slight issue in that the blue symbols show up if you just move the group ☹  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d71f0df194cedb6f75195fefdce2cf44615ebe16.png)

but I think we are drifting off-topic 🙂

---

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

</div>

Change the grid size to 10?  
 ![Untitled 7](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4d3d4395d15e6e6bf0c69cdb36b79308f53b5bb8.jpeg)

---

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

</div>

It does work ta 🙂  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/afb8b493b257d3b47ca40fdfa0acd5b36347c53c.png)

but......  
20 is the default and I think it would be good to have it aligning OOTB

10 makes things a bit "fiddly" for normal flow construction but I'll give a go for a while and see how I feel 🙂

---

<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 10:03 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/8 "2021-11-11T10:03:26Z")

</div>

There are also the new align options in the menu - does that help at all? I've not used them yet but certainly will be.

---

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

</div>

Just tried them and I don't think so

But maybe if there was an "Align nose to tail" option???

I'm just thinking that the basic issue is that the node length doesn't take into account the grid size and this is what leads to slight visual inconsistency

---

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

</div>

> [@cymplecy](#):
>
> it would be good to have it aligning OOTB

Err it does align OOTB... just maybe not to your specification... but at least we provide the settings to allow you to set it as you want... and yes alignment vs fiddly is the tradeoff you can make.

---

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

</div>

I'm feeling a lot of - no chance on this one Simon 🙂

---

<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 10:14 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/12 "2021-11-11T10:14:35Z")

</div>

> [@dceejay](#):
>
> Err it does align OOTB

I think if you look again at 1st post - it really doesn't align OOTB 🙂

Maybe "align" is the wrong word 🙂

---

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

</div>

Maybe you just need to retrain your brain to think in a different alignment mode 🤣

---

<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 10:20 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/14 "2021-11-11T10:20:53Z")

</div>

Distribute horizontally does work but in a limited way it appears. If I select 3 nodes, it will evenly space them. But, the order in which you select them matters. If I have 2 nodes to the right, 1 in the middle and 1 on the left and try to distribute them all, 1 of the ones on the right isn't moved.

---

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

</div>

OK - I'm going to come up with an analogy

Imagine if a text coding editor made the spacing between letters in a word proportional but the space char itself was fixed to column positions

That's the effect that we have here 🙂

---

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

</div>

Show me a before and after please as I haven't got anywhere with 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 10:55 UTC](https://discourse.nodered.org/t/alignment-when-snapping-to-grid/53551/17 "2021-11-11T10:55:26Z")

</div>

> [@cymplecy](#):
>
> Maybe "align" is the wrong word

The left hand-edge of each node is aligned to the grid.

I think what you're asking for is it to _sometimes_ align to the right hand edge instead.

---

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

</div>

I think I am asking for width of the node to be aligned/adjusted to take into account grid size so that spacing before and afterwards can be made the same.

---

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

</div>

First let me say that aesthetically, I fully agree there are certain scenarios that don't align as well as I would like.

The challenge has been finding a solution that works for everyone - because as soon as you change something in one person's favour, someone else doesn't like it. IF we change the width of the collapsed nodes, we'll get a lot of complaints about breaking existing layouts.

It is a particular design choice that the collapsed node is square - that it reduces to the icon box of the node without the label.

Ignoring for the moment that users can change their grid size, we did try changing the collapsed width to be a whole number of grid cells - and it just didn't look right as the icon box grew larger.

A different option, that we haven't tried before, is changing the snap-to-grid logic to not just snap the centre of the node, but to also snap the edges to grid lines. We'd have to implement it to see what it felt like to use - but it would then allow you to align whichever edge you wanted. But the fact remains, the collapsed node's width is what it is.

---

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

</div>

> [@knolleary](#):
>
> we did try changing the collapsed width

Its not the collapsed width that is the issue here I think

It's the width of full nodes being inconsistent I think

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