nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Aligning text blocks in a header panel

SimonCrutchley

I'm trying to get the various text blocks in the header of my app to align vertically, but without success. I'd be happy for them to align at the bottom, or in the middle, but I just can't get them to work. If I use 'vertical centre' or 'snap to bottom' it seems to take into account the full size of the box and so nothing quite lines up.

What am I doing wrong, or is this another thing that used to be so simple in WAB that now can't be done?

Encontre mais publicações marcadas com

ArcGIS Online

Accepted answers

ShengdiZhang

How about using a row widget? Or can you share the app for me to have a look at?

All comments

SimonCrutchley

I also realised that I could just use a single text box and split the bits of text up 🤔. I was used to WAB where you had separate blocks for Title, subtitle etc, but EB doesn't work like that. I still think there should be the option to properly align, just in case you wanted to use an image or some such.

SimonCrutchley

Ah, hadn't tried rows; always something new to find in EB 😩

ShengdiZhang

How about using a row widget? Or can you share the app for me to have a look at?

SimonCrutchley

Hi Shengdi,

Unfortunately, that's what I already tried and it doesn't work. Even though each of the text blocks is set to auto height and vertical centre, they don't line up 😞

ShengdiZhang

Hi @SimonCrutchley ,

Currently, we have limitations in setting the vertical alignment of text. One solution is to set the text widget to Auto height and use "vertical centering" on the entire widget.

Shengdi

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.