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?
Any body have any ideas what I'm doing wrong?
Tagged:
1
Categories
- 7.9K Questions
- 926 Ideas
- 220 Discussion Categories
- 178 General
- 9 Community Feedback
- 3 Community Info
- 18 Knowledge Base
Comments
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="<div style="text-align: right;"><span style="font-size:20px;"><strong>Sidebar</strong></span></div> " 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="<div style="text-align: center;"><span style="color:#800080;"><span style="font-size:20px;"><strong>Footer text here</strong></span></span></div> " 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="<div style="text-align: center;"><span style="font-size:24px;"><strong>Hello World - this is a test</strong></span></div> " 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>
Yep, that sorts it - I'll see if I can do without the wrapper
Cheers,
Mark