Spark V2 api - Navigation component in Master Page disappears behind Page Region

I have a master page with a navigation component at the top containing lots of menu items - underneath the navigation component I have a page region. When I view a page which uses the master page and hover over the navigation component of the master page the drop-down menus are hidden by the page region, rather than appearing over the page region, and a scroll bar appears at the right hand side allowing me to scroll to the hidden menu items

Any body have any ideas what I’m doing wrong?

Hi Mark, I couldn’t reproduce the issue, could you please let me know your Skuid version number and share the XML of a simple repro page here?

Hi Luzie,

Skuid version number: 12.0.2

Master page:

<skuid__page unsavedchangeswarning=“yes” personalizationmode=“server” showsidebar=“true” showheader=“true” theme=“Ink”>


<skuid__wrapper uniqueid=“sk-1MZC-49” minHeightCustom=“800px”>

<skuid__grid uniqueid=“sk-1MZD-56” flexDirection=“row” justifyContent=“flex-start” alignItems=“flex-start” columnGutter=“0” rowGutter=“0”>



<skuid__wrapper uniqueid=“sk-1MZH-64”>

<skuid__image source=“staticresource” uniqueid=“sk-1NEI-208” datasource=“salesforce” resource=“skuid__Skuid_App_Logo” resourceContentType=“image/png”>









</skuid__image>





</skuid__wrapper>







<skuid__navigation uniqueid=“sk-1Mao-89” type=“horizontal” responsiveBreakpoint=“medium” alternateFormat=“collapse” overflowToMenu=“false”>

























































































































</skuid__navigation>








</skuid__grid>







</skuid__wrapper>
<skuid__grid uniqueid=“sk-1M_9-244” flexDirection=“row” justifyContent=“flex-start” alignItems=“flex-start” columnGutter=“0” rowGutter=“0”>



<skuid__wrapper uniqueid=“sk-1M_C-250”>

<skuid__text contents=“&lt;div style=&quot;text-align: right;&quot;&gt;&lt;span style=&quot;font-size:20px;&quot;&gt;&lt;strong&gt;Sidebar&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;&#10;” uniqueid=“sk-1M_E-257”>



</skuid__text>





</skuid__wrapper>




<skuid__pageRegion uniqueid=“sk-1M_N-264”>

</skuid__pageRegion>



</skuid__grid>
<skuid__text contents=“&lt;div style=&quot;text-align: center;&quot;&gt;&lt;span style=&quot;color:#800080;&quot;&gt;&lt;span style=&quot;font-size:20px;&quot;&gt;&lt;strong&gt;Footer text here&lt;/strong&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&#10;” uniqueid=“sk-1N3Z-132”/>












</skuid__page>

Page using master page:

<skuid__page unsavedchangeswarning=“yes” theme=“Ink”>














<skuid__wrapper uniqueid=“sk-1N1y-136” height=“custom” heightCustom=“1000px” minHeightCustom=“600px” minHeight=“custom”>

<skuid__text contents=“&lt;div style=&quot;text-align: center;&quot;&gt;&lt;span style=&quot;font-size:24px;&quot;&gt;&lt;strong&gt;Hello World - this is a test&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;&#10;” uniqueid=“sk-1M_m-134”/>
<skuid__geochart model=“MapTestData” maintitle=“{{Model.labelPlural}}” maptype=“gb-all” height=“600px” uniqueid=“sk-1NsA-298” mapgroup=“eu”>

var params = arguments[0], $ = skuid.$;

var row, newRow;

var model = skuid.model.getModel(‘MapTestData’);
if(model)
{
row = model.getFirstRow();
if(row)
{
model.updateRow(row, { Country: ‘GB’, County: ‘AY’, Data: 85 }); //Anglesey
}

newRow = model.createRow({ doAppend: true });
model.updateRow(newRow, { Country: 'GB', County: 'BZ', Data: 85 }); //Bromley

newRow = model.createRow({ doAppend: true });
model.updateRow(newRow, { Country: 'GB', County: 'KE', Data: 83 }); //Kent

newRow = model.createRow({ doAppend: true });
model.updateRow(newRow, { Country: 'GB', County: '3270', Data: 85 }); //Orkney

model.save();

}

Mark, thank you for providing the XML of Master and Child page! Let me start the investigation and I will keep you posted here.

Hi Mark, I’m afraid that the issue is caused by the wrapper around the navigation. As workaround, is it possible for you to take the navigation out of the wrapper? I will run further tests and then inform our dev team about it. 

Hi Luzie,

Yep, that sorts it - I’ll see if I can do without the wrapper

Cheers,

Mark