topic Re: align div in header -content in Calcite Design System Questions

align div in header -content

LefterisKoumis — Wed, 29 Jun 2022 00:16:19 GMT

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>

Re: align div in header -content

BenElan — Wed, 29 Jun 2022 01:18:11 GMT

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

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

Re: align div in header -content

LefterisKoumis — Wed, 29 Jun 2022 16:07:24 GMT

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:

Re: align div in header -content

BenElan — Wed, 29 Jun 2022 17:41:36 GMT

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

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