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

@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>