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

MarkMark ✭✭
edited January 21, 2019 in Questions
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?

Comments

  • Luzie BaumgartLuzie Baumgart 🛠️ 
    edited January 18, 2019
    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?
  • MarkMark ✭✭
    edited January 18, 2019
    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>

  • Luzie BaumgartLuzie Baumgart 🛠️ 
    edited January 18, 2019
    Mark, thank you for providing the XML of Master and Child page! Let me start the investigation and I will keep you posted here.
  • Luzie BaumgartLuzie Baumgart 🛠️ 
    edited January 21, 2019
    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. 
  • MarkMark ✭✭
    edited January 21, 2019
    Hi Luzie,

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

    Cheers,

    Mark
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!