Custom Header with navigation overlaps makes other page components inaccessible (Banzai 7.7)

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
When decreasing the window with on a page that contains a flexible with navigation menu, the navigation menu increases in height and "covers" (z-order) the other components on the page thereby making them inaccessible. 

I'm stealing a page from Pats playbook here and captured this one on video.  See below for Sample Page XML.



Sample Page XML
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" tabtooverride="Account">   <models>
      <model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
         </fields>
         <conditions>
            <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Account" uniqueid="sk-2qZfjp-67">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.label}}</template>
         </subtitle>
         <actions>
            <action type="delete"/>
            <action type="clone"/>
            <action type="share"/>
            <action type="savecancel" window="self"/>
         </actions>
      </pagetitle>
      <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-2qZfjp-68">
         <columns>
            <column width="50%">
               <sections>
                  <section title="Basics">
                     <fields>
                        <field id="Name"/>
                     </fields>
                  </section>
               </sections>
            </column>
            <column width="50%">
               <sections>
                  <section title="System Info">
                     <fields>
                        <field id="CreatedDate"/>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
   <pageregioncontents>
      <pageregioncontent uniqueid="__header">
         <components>
            <skuidheader>
               <components>
                  <grid uniqueid="sk-2qZjLw-94">
                     <divisions>
                        <division behavior="flex" minwidth="100px" ratio="1" verticalalign="top">
                           <components>
                              <navigation uniqueid="sk-2qZkF5-99">
                                 <navigationitems>
                                    <navigationitem label="New Navigation Item1">
                                       <actions>
                                          <action type="redirect" window="self"/>
                                       </actions>
                                    </navigationitem>
                                    <navigationitem label="New Navigation Item2">
                                       <actions>
                                          <action type="redirect" window="self"/>
                                       </actions>
                                    </navigationitem>
                                    <navigationitem label="New Navigation Item3">
                                       <actions>
                                          <action type="redirect" window="self"/>
                                       </actions>
                                    </navigationitem>
                                    <navigationitem label="New Navigation Item4">
                                       <actions>
                                          <action type="redirect" window="self"/>
                                       </actions>
                                    </navigationitem>
                                    <navigationitem label="New Navigation Item5">
                                       <actions>
                                          <action type="redirect" window="self"/>
                                       </actions>
                                    </navigationitem>
                                    <navigationitem label="New Navigation Item6">
                                       <actions>
                                          <action type="redirect" window="self"/>
                                       </actions>
                                    </navigationitem>
                                 </navigationitems>
                              </navigation>
                           </components>
                        </division>
                        <division behavior="fit" verticalalign="top">
                           <components>
                              <navigation uniqueid="sk-2qZnIr-111" source="sfusermenu" type="dropdown" label="{{$User.name}}">
                                 <navigationitems/>
                              </navigation>
                           </components>
                        </division>
                        <division behavior="fit" verticalalign="top">
                           <components>
                              <navigation uniqueid="sk-2qZmix-107" source="sfapps" type="dropdown">
                                 <navigationitems/>
                              </navigation>
                           </components>
                        </division>
                     </divisions>
                     <styles>
                        <styleitem type="background" bgtype="none"/>
                     </styles>
                     <renderconditions logictype="and"/>
                  </grid>
               </components>
               <styles>
                  <styleitem type="background" bgtype="none"/>
                  <styleitem type="border"/>
               </styles>
            </skuidheader>
         </components>
      </pageregioncontent>
   </pageregioncontents>
</skuidpage>
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Yes, this has been previously identifed internally and we are evaluating the best way of solving the issue. 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
This appears to be at least improved if not resolved in 7.20, can someone confirm?

Thanks!
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,036 Points 20k badge 2x thumb
This should be fixed in Banzai Update 4 / 7.20.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Awesome, thanks Zach.

Tested and confirmed with 7.20.  Thanks!