Action Pad labels

Anonymous User

I have a Calcite Action Pad defined as a sibling to a Calcite Shell component which contains a header and my mapView div like this:

<calcite-action-pad style="position:absolute;margin-top:4px;margin-left:4px;visibility:hidden;" expanded layout="vertical" id="hamburgerMenu">
      <calcite-action id="menu1" onclick="window.open('aURL','_blank')" text="Frequently Asked Questions" icon="question-mark"></calcite-action>
      <calcite-action id="menu2" onclick="window.open('aURL','_blank')" text="FWP Buy and Apply" icon="shopping-cart"></calcite-action>
      <calcite-action id="menu3" onclick="window.open('aURL','_blank')" text="TIP-MONT" icon="star-circle"></calcite-action>
      <calcite-action id="menu4" onclick="window.open('aURL','_blank')" text="Submit Feedback" icon="edit-attributes"></calcite-action>
      <calcite-action id="menu5" onclick="document.getElementById('myModal-disclaimer').style.display = 'block'" text="Show Disclaimer" icon="exclamation-mark-circle"></calcite-action>
  </calcite-action-pad>

It is not visible by default but is triggered by a click event on an icon. On desktop the labels show up as expected but on mobile they do not show up at all. When expanded the action pad expands by a few pixels but no text appears. Is this a known issue, or something I'm doing wrong here?

Anonymous User

Thanks for bringing this up.
Because the documentation site has 3 main columns (navigation, content, in-page navigation), displaying the shell preview component in the center column doesn't work well. Alongside optimizing the content for usage and best practices. 

We are working on alternative solutions for optimizing the display of this higher-level (layout-based) component and adding back into the component list. ​