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; } } }

align div in header -content

LefterisKoumis

Trying to place the arrow icon to the far right side of the header -content div.

<calcite-panel id="feature_info" with-Scale="l">
          <div id="header-content" slot="header-content" style="font-size: large; font-weight: bold; float: right">
            Feature Info
            <div style="float:right">
              <calcite-icon icon="arrow-bold-right" id="next"></calcite-icon>
            </div>
          </div>

          
        </calcite-panel>

Encontre mais publicações marcadas com

Accepted answers

BenElan

I edited the codepen a bit, is this what you're looking for?

https://codepen.io/benesri/pen/gOeOeLp

All comments

BenElan

I edited the codepen a bit, is this what you're looking for?

https://codepen.io/benesri/pen/gOeOeLp

LefterisKoumis

By using the slot, can we control the location of the arrow like adding a vertical alignment and padding so it is not at the extreme end of the panel, like this:

BenElan

Hi @LefterisKoumis, you can use Panel's header-actions-end slot. Here is a sample:

https://codepen.io/benesri/pen/gOeOeLp?editors=1000

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.