Lovelace Code Editor Too Narrow

Apologies if I’m the only one who didn’t know this, but this is one of those things where once you know, you’ll use it all the time.

I spent most of yesterday revamping my dashboard, the root card of each element is a custom card which doesn’t have a visual editor. By default the window in which you edit is often narrower than its contents so I spent hours frustratingly scrolling the contents of said window.

Today while making some changes I did something (at the time I didn’t know what) and a wide version suddenly appeared! I eventually realised that if you left click on the title of the editing window (Grid Card Configuration in screenshot below) it will toggle between normal and wide, Duh!!

As I said, apologies if this is common knowledge but I’m sure it will help someone. Regardless, I’m quite pleased with myself. :smiley:

Cheers :partying_face:

Narrow


Wide

4 Likes

Wow … stunning thing. I wasn’t aware of that and pretty annoyed about that small editing window since more but a year now. I even asked about that issues without getting a single reply.

Wonder when this got implemented … perhaps years ago? If so … poorly implemented. Windowed systems normally present some sort of toggle icon in the top right edge to make this feature visible to the users.

1000 thanks for pointing this out, you get the hero of the day award from my side :smiley:

1 Like

All pop-up cards expand to a wide version when the header is clicked.

1 Like

This is amazing. And I don’t think it is widely known as I have discussed this from time to time in the forums - and this was never mentioned. I have developed lovelace cards with hundreds of lines in markup cards for a few years now - and always in that tiny narrow window. I often copy-paste to a text editor (which seems to be the most frequently suggested work around to the narrow window)

This definitely needs to be highlighted more!!

Now - if only there was also a simple way to move a block of code left or right. For example, if you take a hundred lines of code from a single card and paste it into a vertical stack card - you need to move every line over a few spaces. I’m sure there must be a way to move all hundred lines in bulk - but like the “wide feature” above - it might be a closely guarded secret :slight_smile:

1 Like

Well, you’re in luck there too. Just highlight the lines that you want move, then press tab to indent to the right or shift-tab to indent to the left.

1 Like

Thanks!

Will that insert spaces or tabs?

Spaces, says MS Word:
image

2 Likes

Thank-you - I will no doubt try this out soon!