Navigation Component Item icons and labels not displaying on page load 9.5.5

edited February 4 in Problems
Nav component items display as three lines with no label sometimes on page load. Doesn't seem to have a pattern. Once clicked, the icon and label appear. Screenshots attached.
image
image


Comments

  • Stephen SellsStephen Sells Member
    edited May 2017
    I'm having a difficult time reproducing what you are seeing. Do you have a simple reproduction page without custom objects that you wouldn't mind copying over the XML for us?
  • Karen WaldschmittKaren Waldschmitt Skuid Mod, Admin 🛠️ 
    edited May 2017
    Raymond~

    Is this what you are talking about with the 3 lines in the nav component?

    Here is what I see if my nav component is allowed to take the full width of the Skuid page.  
    image
    Here is what I see if the nav component is the 2nd of 3 divisions of a responsive grid. Due to a lack of space in the division, it's changing to the 3 lines so I can see the rest of the options.
    image
    Thanks!
    Karen
  • edited October 2019
    Yes! That is what I am seeing, however, it only happens maybe once every ten page loads and when you click on the nav item, it expands out to a normal nav item and works normally from that point on. It is not a space issue, however, they are in "fit to content" responsive grids.
  • edited October 2019
    Here is xml that demonstrates the problem. In this scenario, the nav's work on page load, but then if you click the "other tab" in the tab set then click back to the first tab in the tab set, the navs load with 3 lines. If you click them, they expand back out with the labels and icons.

    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" theme="StoneHouseModernDashboard">
        <models>
        </models>
        <components>
            <wrapper uniqueid="sk-1RWAhC-275">
                <components>
                    <tabset rememberlastusertab="false" defertabrendering="true" uniqueid="sk-16wgU2-190" renderas="">
                        <tabs>
                            <tab name="Sample" loadlazypanels="true" icon="fa-bell">
                                <components>
                                    <wrapper uniqueid="sk-1gm68t-1908">
                                        <components>
                                            <wrapper uniqueid="sk-2XEN89-2716">
                                                <components>
                                                    <tabset rememberlastusertab="false" defertabrendering="true" uniqueid="sk-3Llnyq-963" renderas="lefttabs" sidebarwidth="150px">
                                                        <tabs>
                                                            <tab name="Tab with Navs" loadlazypanels="true" icon="fa-dashboard">
                                                                <components>
                                                                    <wrapper uniqueid="sk-c5yLQ-2843">
                                                                        <components/>
                                                                        <styles>
                                                                            <styleitem type="background"/>
                                                                            <styleitem type="border"/>
                                                                            <styleitem type="size" height="custom">
                                                                                <styles>
                                                                                    <styleitem property="min-height" value="20px"/>
                                                                                    <styleitem property="max-height" value="20px"/>
                                                                                    <styleitem property="overflow-y" value="auto"/>
                                                                                </styles>
                                                                            </styleitem>
                                                                        </styles>
                                                                    </wrapper>
                                                                    <wrapper uniqueid="sk-c2igE-2593">
                                                                        <components>
                                                                            <grid uniqueid="sk-b-qh9-2470">
                                                                                <divisions>
                                                                                    <division behavior="flex" minwidth="100px" ratio="1">
                                                                                        <components>
                                                                                            <navigation uniqueid="sk-bx5ko-2131">
                                                                                                <navigationitems>
                                                                                                    <navigationitem label="Test1" icon="fa-arrow-circle-right">
                                                                                                        <actions/>
                                                                                                    </navigationitem>
                                                                                                </navigationitems>
                                                                                            </navigation>
                                                                                        </components>
                                                                                    </division>
                                                                                    <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                                                                                        <components>
                                                                                            <navigation uniqueid="sk-2ISmQn-1865">
                                                                                                <navigationitems>
                                                                                                    <navigationitem label="Test2" icon="fa-phone-square">
                                                                                                        <actions/>
                                                                                                    </navigationitem>
                                                                                                </navigationitems>
                                                                                            </navigation>
                                                                                        </components>
                                                                                    </division>
                                                                                </divisions>
                                                                                <styles>
                                                                                    <styleitem type="background" bgtype="none"/>
                                                                                </styles>
                                                                            </grid>
                                                                        </components>
                                                                        <styles>
                                                                            <styleitem type="background" bgtype="color">
                                                                                <styles>
                                                                                    <styleitem property="background-color" value="#b8cce4"/>
                                                                                </styles>
                                                                            </styleitem>
                                                                            <styleitem type="border"/>
                                                                            <styleitem type="size"/>
                                                                        </styles>
                                                                    </wrapper>
                                                                    <wrapper uniqueid="sk-c3AsK-2637">
                                                                        <components>
                                                                            <grid uniqueid="sk-b-pe2-2459">
                                                                                <divisions>
                                                                                    <division behavior="flex" minwidth="100px" ratio="1">
                                                                                        <components>
                                                                                            <navigation uniqueid="sk-bxJ20-2170">
                                                                                                <navigationitems>
                                                                                                    <navigationitem label="Test3" icon="fa-arrows-h">
                                                                                                        <actions>
                                                                                                        </actions>
                                                                                                    </navigationitem>
                                                                                                </navigationitems>
                                                                                            </navigation>
                                                                                        </components>
                                                                                    </division>
                                                                                    <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                                                                                        <components>
                                                                                            <navigation uniqueid="sk-2IUjt1-2021">
                                                                                                <navigationitems>
                                                                                                    <navigationitem label="Test4" icon="sk-icon-account-transfer">
                                                                                                        <actions/>
                                                                                                        <navigationitems/>
                                                                                                    </navigationitem>
                                                                                                </navigationitems>
                                                                                                <styles/>
                                                                                            </navigation>
                                                                                        </components>
                                                                                    </division>
                                                                                </divisions>
                                                                                <styles>
                                                                                    <styleitem type="background" bgtype="none"/>
                                                                                </styles>
                                                                            </grid>
                                                                        </components>
                                                                        <styles>
                                                                            <styleitem type="background" bgtype="color">
                                                                                <styles>
                                                                  &nbsp
  • Mark DeSimoneMark DeSimone Skuid Mod 🛠️ 
    edited February 4
    Raymond, I think a bit of your XML was truncated unfortunately. 
  • edited February 4
    Try this:

    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" theme="StoneHouseModernDashboard">
        <models/>
        <components>
            <wrapper uniqueid="sk-163-cT-196">
                <components>
                    <tabset rememberlastusertab="false" defertabrendering="true" uniqueid="sk-3Llnyq-963" renderas="lefttabs" sidebarwidth="150px">
                        <tabs>
                            <tab name="Tab with Navs" loadlazypanels="true" icon="fa-dashboard">
                                <components>
                                    <wrapper uniqueid="sk-c5yLQ-2843">
                                        <components>
                                            <navigation uniqueid="sk-bx5ko-2131">
                                                <navigationitems>
                                                    <navigationitem label="Test1" icon="fa-arrow-circle-right">
                                                        <actions/>
                                                    </navigationitem>
                                                </navigationitems>
                                            </navigation>
                                            <navigation uniqueid="sk-2ISmQn-1865">
                                                <navigationitems>
                                                    <navigationitem label="Test2" icon="fa-phone-square">
                                                        <actions/>
                                                    </navigationitem>
                                                </navigationitems>
                                            </navigation>
                                            <navigation uniqueid="sk-bxJ20-2170">
                                                <navigationitems>
                                                    <navigationitem label="Test3" icon="fa-arrows-h">
                                                        <actions/>
                                                    </navigationitem>
                                                </navigationitems>
                                            </navigation>
                                            <navigation uniqueid="sk-2IUjt1-2021">
                                                <navigationitems>
                                                    <navigationitem label="Test4" icon="sk-icon-account-transfer">
                                                        <actions/>
                                                        <navigationitems/>
                                                    </navigationitem>
                                                </navigationitems>
                                                <styles/>
                                            </navigation>
                                        </components>
                                        <styles>
                                            <styleitem type="background" bgtype="color">
                                                <styles>
                                                    <styleitem property="background-color" value="#f2f2f2"/>
                                                </styles>
                                            </styleitem>
                                            <styleitem type="border"/>
                                            <styleitem type="size"/>
                                        </styles>
                                    </wrapper>
                                </components>
                            </tab>
                            <tab name="OtherTab" loadlazypanels="true" icon="fa-sliders">
                                <components>
                                    <wrapper uniqueid="sk-2fUz6u-2038">
                                        <components>
                                            <richtext multiple="false" uniqueid="sk-15ntew-281">
                                                <contents>&lt;p style="text-align: center;"&gt;&lt;span style="font-size:22px;"&gt;Sample Stuff Here&lt;/span&gt;&lt;/p&gt;
    </contents>
                                            </richtext>
                                        </components>
                                        <styles>
                                            <styleitem type="background" bgtype="color">
                                                <styles>
                                                    <styleitem property="background-color" value="#f2f2f2"/>
                                                </styles>
                                            </styleitem>
                                            <styleitem type="border"/>
                                            <styleitem type="size"/>
                                        </styles>
                                    </wrapper>
                                </components>
                            </tab>
                        </tabs>
                        <renderconditions logictype="and"/>
                    </tabset>
                </components>
                <styles>
                    <styleitem type="background"/>
                    <styleitem type="border" padding="all">
                        <styles>
                            <styleitem property="padding" value="20px"/>
                            <styleitem property="box-sizing" value="border-box"/>
                        </styles>
                    </styleitem>
                    <styleitem type="size"/>
                </styles>
            </wrapper>
        </components>
        <resources>
            <labels/>
            <javascript/>
            <css/>
        </resources>
        <styles>
            <styleitem type="background" bgtype="none"/>
        </styles>
        <pageregioncontents>
            <pageregioncontent uniqueid="__footer">
                <components>
                    <skuidfooter sticky="true">
                        <components/>
                        <styles>
                            <styleitem type="background" bgtype="color">
                                <styles>
                                    <styleitem property="background-color" value="transparent"/>
                                </styles>
                            </styleitem>
                            <styleitem type="border"/>
                        </styles>
                        <renderconditions logictype="and"/>
                    </skuidfooter>
                </components>
            </pageregioncontent>
            <pageregioncontent uniqueid="__header">
                <components>
                    <skuidheader>
                        <components/>
                        <styles>
                            <styleitem type="background" bgtype="color">
                                <styles>
                                    <styleitem property="background-color" value="rgba(0%,0%,0%,0.5)"/>
                                </styles>
                            </styleitem>
                            <styleitem type="border"/>
                        </styles>
                        <renderconditions logictype="and"/>
                    </skuidheader>
                </components>
            </pageregioncontent>
        </pageregioncontents>
    </skuidpage>

  • Mark DeSimoneMark DeSimone Skuid Mod 🛠️ 
    edited May 2017
    Hi Raymond, thank you for this reproduction page. I've found that two settings appear to be necessary to cause this visual issue:
    1) Unchecking the Overflow to Menu Navigation option on any of your 4 navigation items causes that icon to remain loaded while switching between tabs. It would also affect how responsive the navigation menus are, of course. 
    2) Unchecking Defer rendering of tab contents on your tab component allows the icons to show correctly after switching tabs. Having this unchecked can affect page load time, and so is not the recommended setting, but it may help you in getting the icons to behave as expected. 

    Both of the above settings should normally be checked for most applications, so I will submit this as a product issue to our development team, and we will update this post when a fix is available. 
  • edited May 2017
    Great, thanks!
  • Stephen SellsStephen Sells Member
    edited August 2018

    Hello Skuid Community ~

    This has been addressed in the new Millau 11.2.6 release which is now available on the Skuid Releases page.

    As a reminder, Salesforce does NOT allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission critical functionality before installing into a production environment. We also recommend that you update out of date themes when you upgrade.

Sign In or Register to comment.