calcite-shell needs content-behind to use display-mode="float"?

387
1
Jump to solution
07-21-2023 09:26 AM
LefterisKoumis
Occasional Contributor III

I have two shell panels for each side of the app. I'd like to use the end panel with an adjustable height.

So the script is like this:

 

<calcite-shell content-behind>
      <calcite-shell-panel slot="panel-start" collapsed id="shell-panel-start" position="start" width-scale="l" display-mode="dock">
	  ----
	  -----
     </calcite-shell-panel>
     <calcite-shell-panel slot="panel-end" position="end" resizable width-scale="l" display-mode="float">
       <div style="height:500px"><p>THis is a test</p></div>
     </calcite-shell-panel>	  
 </calcite-shell>

 

https://codepen.io/lkoumis1/pen/BaGJeaK 

In addition,  I'd like to use the  the features widget and see the popup in the start panel without overlapping the map. Thanks to @KittyHurley I was informed to see the popup without overlapping the map, I will need to remove the content-behind from the calcite-shell.

However, when I remove content-behind, the end panel height changes to 100% even though it is set to display-mode to "float"

Suggestions?

@KittyHurley @BenElan 

0 Kudos
1 Solution

Accepted Solutions
KittyHurley
Esri Contributor

This would be a great enhancement, there is an open enhancement request at https://github.com/Esri/calcite-design-system/issues/1932. Just added additional context to the issue with the use case for context and have escalated the request for consideration.

 

As a workaround in the meantime, could leverage adding an element using the view.ui from the Maps SDK, something like this perhaps: https://codepen.io/geospatialem/pen/oNQyaPM.

View solution in original post

0 Kudos
1 Reply
KittyHurley
Esri Contributor

This would be a great enhancement, there is an open enhancement request at https://github.com/Esri/calcite-design-system/issues/1932. Just added additional context to the issue with the use case for context and have escalated the request for consideration.

 

As a workaround in the meantime, could leverage adding an element using the view.ui from the Maps SDK, something like this perhaps: https://codepen.io/geospatialem/pen/oNQyaPM.

0 Kudos