How do you control alignment of elements in TradingView's settings menu using PineScript5?

Question

I'm putting together a fib retracement indicator, I defined a bunch of inputs and grouped them up side by side by using inline

// User inputs for HIGH line properties
lineColorHigh = input(color.gray, title="Top Line Color", inline="top", group="Fibonacci Settings")
lineHighWidth = input(2, title="Top Line Width", inline="top", group="Fibonacci Settings")


// User inputs for the 78.6% Fibonacci level line properties
seventyEightSixLineColor = input.color(color.rgb(100, 181, 246), title="78.6% Line Color", inline="78.6%", group="Fibonacci Settings")
seventyEightSixLineWidth = input.int(2, title="78.6% Line Width", inline="78.6%", group="Fibonacci Settings")


// User inputs for the 61.8% Fibonacci level line properties
sixtyOneEightLineColor = input(color.yellow, title="61.8% Line Color", inline="61.8%", group="Fibonacci Settings")
sixtyOneEightLineWidth = input(2, title="61.8% Line Width", inline="61.8%", group="Fibonacci Settings")

However in the settings menu the items are not neatly aligned

Does anyone know how to fix the alignment problems?

Answer 1

You need to add Unicode white space characters to move forward the text. You can use the Em space ( ): 8195 (0x2003)

Here is useful F.A.Q. for you.

lineColorHigh = input(color.gray, title="Top Line Color ", inline="top", group="Fibonacci Settings")
lineHighWidth = input(2, title="Top Line Width ", inline="top", group="Fibonacci Settings")

// User inputs for the 78.6% Fibonacci level line properties
seventyEightSixLineColor = input.color(color.rgb(100, 181, 246), title="78.6% Line Color", inline="78.6%", group="Fibonacci Settings")
seventyEightSixLineWidth = input.int(2, title="78.6% Line Width", inline="78.6%", group="Fibonacci Settings")