Select to view content in your preferred language

Cannot align horizonally inside calcite-panel

526
2
05-01-2023 01:48 PM
LefterisKoumis
Frequent Contributor

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?

0 Kudos
2 Replies
FC_Basson
MVP Regular Contributor

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.

0 Kudos
LefterisKoumis
Frequent Contributor

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.

0 Kudos