FwPanelScrollable Class

This component is used to generate a scrollable section of a panel It will take a couple of parameters to customize it, but it will display the scrollbar and format it

Basic Usage:

<FwPanelScrollable @maxHeight='200px' @hideOnMouseLeave={{false}} @scrollbarThickness='thin'>
     {{!...stuff to be in the panel}}
</FwPanelScrollable>

Advanced Usage Notes:

This scrollable panel works in a difficult way with power-select, so it needs special attention in order to work properly. If not configured properly, power select drop down menu will be clipped and hidden underneath the scrollable panel. This has to do with the renderInPlace=true on the power select, which is there to make it work with modals. Here is the fix:

• Scenario 1. If you are NOT in a modal, simply remove @renderInPlace={{true}} from the power select, and it will work again.
• Scenario 2. If you ARE in a modal, you have a few steps.
  • Remove @renderInPlace={{true}} from the power select
  • The line above the FwPanelScrollable, put the following code: <div id="uniqueDivId"></div>
  • Then in the PowerSelect component write add the attribute, @destination="uniqueDivId".
  • Finally, in your FwFullscreenModal component, add the attribute: @scrollTopReturn=true.

With these four steps, the PowerSelect should be working in modals perfectly as well.