Navigation drop-down menu display issue

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
When placing a navigation component on a page, the display of drop-down menus gets "cut-off" based on container height, etc.  Placing the nav component in the "header" and the problem does not occur.

One solution to this is to ensure that the container has a minimum height of what the menu would need but this is not ideal.  I'm guessing the problem has something to do with the zorder and/or the js/css implementation.

Note in the screen cap below the menu should display the entire SFDC Apps menu.




Steps to repro:
1) Create new blank page
2) Add nav component and set it to dropdown for any of the options
3) Preview

Sample Page XML

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false">   <models/>
   <components>
      <navigation uniqueid="sk-25asHR-58" source="sfapps" type="dropdown">
         <navigationitems/>
         <styles/>
      </navigation>
   </components>
   <resources>
      <labels/>
      <javascript/>
      <css/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>

Thanks!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Andrew Duensing

Andrew Duensing, Employee

  • 740 Points 500 badge 2x thumb
Thank you so much for posting this Barry! Your detailed reporting has allowed me to fix this in our dev org, and the changes should be live with our next patch.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Awesome news, thanks Andrew!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Tested and confirmed as resolved in Skuid 7.16.  Thank you!