heightScale not working in shell-panel?

[LefterisKoumis]

I have this simple shell panel positioned at the end. It seems that regardless the specified heightScale value (l, m, s), the shell panel does not change its height.

My perception is that if we use heightScale value "s", then the end panel should be short to show the content of the page after its bottom edge.

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

@BenElan @KittyHurley 

[KittyHurley · Accepted solution]

@LefterisKoumis Thanks for pointing this out - the "heightScale" property can only be set when the "layout" is set to "horizontal". The documentation page lists all types of "layouts", and will be updated to reflect the change in the near future.

To modify the height when "layout" is set to "vertical", you can use CSS to alter the height of the content desired, in particular with the Panel, so the Action Bar isn't affected by the height. Could also add Shell's "content-behind" attribute to float over the remaining content.

For instance: https://codepen.io/geospatialem/pen/YzBjrJx 

<style>
#panel-start {
  height: 30vh;
}
</style>

<calcite-shell content-behind>
  <calcite-shell-panel slot="panel-end" position="end" id="shell-panel-start" display-mode="float" layout="vertical">
    <calcite-action-bar slot="action-bar">
      <calcite-action-group>
        <calcite-action text="Add" icon="plus"></calcite-action>
        <calcite-action active text="Layers" indicator icon="layers"></calcite-action>
      </calcite-action-group>
      <calcite-action-group>
        <calcite-action text="Undo" icon="undo"></calcite-action>
        <calcite-action text="Redo" indicator icon="redo"></calcite-action>
        <calcite-action text="Save" disabled icon="save"></calcite-action>
      </calcite-action-group>
      <calcite-action-group slot="bottom-actions">
        <calcite-action text="Tips" icon="question"></calcite-action>
        <calcite-action text="Settings" indicator icon="gear"></calcite-action>
      </calcite-action-group>
    </calcite-action-bar>
    <calcite-panel heading="Layers" id="panel-start" closable>
      <calcite-block collapsible open heading="Symbology" description="Select type, color, and transparency">
        <calcite-icon scale="s" slot="icon" icon="map-pin"></calcite-icon>
        <calcite-notice open>
          <div slot="message">The viewers are going to love this</div>
        </calcite-notice>
      </calcite-block>
    </calcite-panel>
  </calcite-shell-panel>
  <calcite-panel heading="Content" id="content">
  </calcite-panel>
</calcite-shell>

[LefterisKoumis]

Hello Kitty. Thank you for the above solution. When I tried to use a table in a calcite-shell-center-row  so it spans across the bottom and under the panel located inside the calcite-shell-panel slot="panel-end"  it stops right at the left edge of the panel. Is it possible to span the table or does the panel at the panel-end occupies that space? Thank you.

[KittyHurley]

@LefterisKoumis You could use the Shell's "panel-start" or "panel-end" slots, for instance: https://codepen.io/geospatialem/pen/bGPrNwK. You could also adjust the height and width of the Shell Panel and its contents using CSS variables.

[LefterisKoumis]

.