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

  • 1
  • Problem
  • Updated 2 months ago
  • In Progress
  • (Edited)
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?
Photo of Mark

Mark

  • 490 Points 250 badge 2x thumb

Posted 2 months ago

  • 1
Photo of Luzie Baumgart

Luzie Baumgart, Official Rep

  • 2,178 Points 2k badge 2x thumb
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?
Photo of Mark

Mark

  • 490 Points 250 badge 2x thumb
Hi Luzie,

Skuid version number: 12.0.2

Master page:

<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" theme="Ink">
<models/>
<components>
<skuid__wrapper uniqueid="sk-1MZC-49" minHeightCustom="800px">
<components>
<skuid__grid uniqueid="sk-1MZD-56" flexDirection="row" justifyContent="flex-start" alignItems="flex-start" columnGutter="0" rowGutter="0">
<divisions>
<division minWidth="100px" ratio="1" alignSelf="auto">
<components>
<skuid__wrapper uniqueid="sk-1MZH-64">
<components>
<skuid__image source="staticresource" uniqueid="sk-1NEI-208" datasource="salesforce" resource="skuid__Skuid_App_Logo" resourceContentType="image/png">
<interactions>
<interaction type="tap">
<action type="redirect" window="self" url="{{$Site.CurrentSiteUrl}}apex/skuid__ui?page=Home"/>
</interaction>
</interactions>
<styles>
<spacing/>
</styles>
<renderConditions logictype="and"/>
</skuid__image>
</components>
<background/>
<styles>
<spacing/>
</styles>
</skuid__wrapper>
</components>
</division>
<division alignSelf="auto" minWidth="200px" ratio="1">
<components/>
</division>
<division alignSelf="auto" minWidth="100px" ratio="20">
<components>
<skuid__navigation uniqueid="sk-1Mao-89" type="horizontal" responsiveBreakpoint="medium" alternateFormat="collapse" overflowToMenu="false">
<itemGroups>
<itemGroup>
<items>
<item label="Menu 1" uniqueid="sk-1Mao-88">
<actions>
<action type="redirect" window="self"/>
</actions>
<itemGroups>
<itemGroup>
<items>
<item label="Item 1" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 2" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 3" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 4" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 5" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 6" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
</items>
</itemGroup>
</itemGroups>
</item>
<item label="Menu 2" uniqueid="sk-1Maq-94">
<actions>
<action type="redirect" window="self"/>
</actions>
<itemGroups>
<itemGroup>
<items>
<item label="Item 1" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 2" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 3" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 4" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 5" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 6" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 7" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
</items>
</itemGroup>
</itemGroups>
<renderConditions logictype="and"/>
<selectedConditions/>
</item>
<item label="Menu 3" uniqueid="sk-1Maq-96">
<actions>
<action type="redirect" window="self"/>
</actions>
<itemGroups>
<itemGroup>
<items>
<item label="Item 1" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 2" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 3" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 4" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
<item label="Item 5" uniqueid="">
<actions/>
<renderconditions logictype="or"/>
</item>
</items>
</itemGroup>
</itemGroups>
</item>
<item label="Menu 4" uniqueid="sk-1Maq-98">
<actions/>
<actions/>
</item>
</items>
</itemGroup>
</itemGroups>
<renderConditions logictype="and"/>
<styles>
<spacing/>
</styles>
</skuid__navigation>
</components>
</division>
<division alignSelf="auto" minWidth="5px" ratio="1">
<components/>
</division>
</divisions>
<interactions/>
<renderConditions logictype="and"/>
</skuid__grid>
</components>
<background/>
<interactions/>
<renderConditions logictype="and"/>
<styles>
<spacing/>
</styles>
</skuid__wrapper>
<skuid__grid uniqueid="sk-1M_9-244" flexDirection="row" justifyContent="flex-start" alignItems="flex-start" columnGutter="0" rowGutter="0">
<divisions>
<division minWidth="200px" ratio="1" alignSelf="auto" maxWidth="200px">
<components>
<skuid__wrapper uniqueid="sk-1M_C-250">
<components>
<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">
<styles>
<spacing/>
</styles>
</skuid__text>
</components>
<background type="color" color="#DBDBFF"/>
<styles>
<spacing/>
</styles>
</skuid__wrapper>
</components>
</division>
<division alignSelf="auto" minWidth="100px" ratio="1">
<components>
<skuid__pageRegion uniqueid="sk-1M_N-264">
<renderConditions logictype="and"/>
</skuid__pageRegion>
</components>
</division>
</divisions>
</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"/>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences uniqueid="sk-1MjX-114"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
<interactions/>
<background/>
</skuid__page>


Page using master page:

<skuid__page unsavedchangeswarning="yes" theme="Ink">
<models>
<model id="MapTestData" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only">
<fields>
<field id="County" displaytype="TEXT" label="County"/>
<field id="Data" displaytype="TEXT" label="Data"/>
<field id="Country" displaytype="TEXT" label="Country"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<pageregioncontents>
<pageregioncontent regionid="sk-1M_N-264" uniqueid="sk-1M_h-97">
<components>
<skuid__wrapper uniqueid="sk-1N1y-136" height="custom" heightCustom="1000px" minHeightCustom="600px" minHeight="custom">
<components>
<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">
<colors/>
<legend/>
<serieslist>
<series joinBy="hc-key" valueField="Data" statefield="County" modelId="MapTestData"/>
</serieslist>
<buckets/>
</skuid__geochart>
<skuid__buttonSet uniqueid="sk-1Ns4-284" position="left">
<groups>
<skuid__buttonGroup>
<buttons>
<skuid__button label="Populate Map Data" uniqueid="sk-1Ns4-288">
<actions>
<action type="custom" snippet="PopulateMapTestData"/>
</actions>
</skuid__button>
</buttons>
</skuid__buttonGroup>
</groups>
</skuid__buttonSet>
<skuid__table model="MapTestData" uniqueid="sk-1X7l-211" mode="read">
<fields>
<field id="Country" uniqueid="sk-1X7y-237"/>
<field id="County" uniqueid="sk-1X7o-224"/>
<field id="Data" uniqueid="sk-1X7o-226"/>
</fields>
<filtering enableSearch="false" instantSearch="false" searchMethod="client"/>
<rowActions/>
<massActions/>
</skuid__table>
</components>
<background/>
</skuid__wrapper>
</components>
</pageregioncontent>
</pageregioncontents>
<components/>
<resources>
<labels/>
<javascript>
<jsitem location="inlinesnippet" name="PopulateMapTestData" cachelocation="false">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();
}

</jsitem>
</javascript>
<css/>
<actionsequences uniqueid="sk-1NcF-208"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuid__page>

Photo of Luzie Baumgart

Luzie Baumgart, Official Rep

  • 2,178 Points 2k badge 2x thumb
Mark, thank you for providing the XML of Master and Child page! Let me start the investigation and I will keep you posted here.
Photo of Luzie Baumgart

Luzie Baumgart, Official Rep

  • 2,178 Points 2k badge 2x thumb
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. 
Photo of Mark

Mark

  • 490 Points 250 badge 2x thumb
Hi Luzie,

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

Cheers,

Mark