OH3 - oh-toggle-item after: expression with <SPACE> escaped

Setup, Configuration and Use Beginners
,
1
  • Platform information:
    • Hardware: _amd64
    • OS: Windows 10/10.0
    • Java Runtime Environment: 11.0.9.1 (Zulu11.43+55-CA)
    • openHAB version: openHAB 3.1.0.M5

Hi All

I am trying to introduce a in my oh-toggle-item after: expression:

after: "=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.displayState + '    ')"

The above results in:

after 1

So there is no space between CLOSED and the Toggle.

after: "=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.displayState + '   .')"

results in:
after 2

So the is there, but that requires the . as well.

I have tried all sorts of escapes but cannot get the " " top work on its own?

Any ideas how to get a space/gap between the CLOSED and the toggle?

Thanks
Mark

2

Does it work to use/inject HTML code like

&nbsp;

( see How to Create Extra Space in HTML or a Web Page ) ?

3

Thanks, but no luck. Tried all the combinations I could think of. Either get undefined for the actual text.

1 Like
4

You’ll get more customized control if instead of using the after config parameter you put a Label in the after slot of the item widget:

- component: oh-toggle-item
  config:
    title: Demo item
  slots:
    after:
      - component: Label
        config:
          text: 'Space here->'
          style:
            padding-right: 20px

image
image813×80 3.95 KB

1 Like
5

Thanks Justin. That works REALLY well. Cool solution.

Can I ask you a slightly off topic question?

What do you use to edit/create your widgets? Do you use the Widget Editor or some external tool that provides more editing features around layout etc? Would be so nice to have a tool that lets you see the structure of teh components before adding all the detail.

Also, if there a trick/secret/tool to correct the indents if you move a set of components inside a different component, or do you have to manually go and correct all the indents?

e.g. Moving a f7-list inside an f7-page etc.?

Thanks again.
Mark

6

I just use the Widget Editor. I find the immediate visual results in the widget preview too useful to move to some other editor.

In the widget editor you can increase [tab] and decrease [shift] + [tab] the indent of whole highlighted blocks of text, if that’s what you mean. Beyond that, I’m not aware of any special tricks.

indent

1 Like