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>
