topic Re: Cannot align horizonally inside calcite-panel in Calcite Design System Questions

Cannot align horizonally inside calcite-panel

LefterisKoumis — Mon, 01 May 2023 20:48:15 GMT

I have two calcite-notice elements that I'd to display side by side (horizontally).

Both calcite-notices to be posted inside a calcite-panel.

The issue is that the notices are displayed vertically.

If I remove the calcite-panel tag, then the calcite-notices appear as intended, side by side.

The Calcite-panel doesn't allow horizontal elements?

https://codepen.io/lkoumis1/pen/KKGXNqv?editors=1000

@KittyHurley?

Re: Cannot align horizonally inside calcite-panel

FC_Basson — Tue, 02 May 2023 06:10:22 GMT

Try putting the panel content, i.e. the divs for each of the calcite-notice, within a single containing div, which acts as the panel default content container.

Re: Cannot align horizonally inside calcite-panel

LefterisKoumis — Tue, 02 May 2023 16:24:04 GMT

Thank you. Yes, it does work if you place the notices inside another div , but it doesn't answer my question:

"The Calcite-panel doesn't allow horizontal elements?"

I used the panel in other scenarios, for example, where I placed a tab inside the panel. Several elements inside the tab were aligned horizontally with no issues. So, I guess the answer to my question is No unless if you use another component inside the panel and be the parent of the elements to be aligned horizontally.