Table components with "Allow Scroll Bars" not showing any data until you click on stuff (Lightning 11.2.9)

  • 1
  • Problem
  • Updated 4 months ago
  • Solved
^ as described above. This is quite a big one for us. Seems maybe to only affect new pages?

If there's a quick css fix we can add to the page could someone let us know?

Cheers!

Louis
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
This is what it looks like:


Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
Did we not have a bunch of extra conversation on this thread? I wonder if maybe I'm just losing my mind.
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
It also seems to happen to the table component in Lightning when you click onto a record in that table and then click the back button in the browser - when you navigate back to the previous record all the rows are removed and only show up again when you click on something in the table component. Interestingly - in all these cases - opening the Chrome Developer Tools forces the rows to pop back in. Bizarre. Same in Firefox.
(Edited)
Photo of Stephen Sells

Stephen Sells, Alum

  • 17,326 Points 10k badge 2x thumb
I haven't been able to reproduce this problem. Can you share your XML of the problem?
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
Hi Stephen, yes - absolutely. This XML is used in a fresh 11.2.9 install using the Skuid Lightning Component in a record detail page (custom object). Also about to provide login access. Thank you!

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="OppsModel" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Opportunity">
            <fields>
                <field id="AccountId"/>
                <field id="Account.Name"/>
                <field id="Amount"/>
                <field id="CloseDate"/>
                <field id="Description"/>
                <field id="Fiscal"/>
                <field id="Id"/>
                <field id="Type"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="100" alwaysresetpagination="false" createrecords="true" model="OppsModel" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-3izY-296" allowscrollbars="true" floatheader="true" freezeleftcolumns="true" columnstofreeze="1">
            <fields>
                <field id="AccountId" uniqueid="fi-3izY-297"/>
                <field id="Account.Name" uniqueid="fi-3izY-298"/>
                <field id="Amount" uniqueid="fi-3izY-299"/>
                <field id="CloseDate" uniqueid="fi-3izY-300"/>
                <field id="Description" uniqueid="fi-3izY-301"/>
                <field id="Fiscal" uniqueid="fi-3izY-303"/>
                <field id="Type" uniqueid="fi-3izY-305"/>
            </fields>
            <rowactions>
                <action type="edit"/>
                <action type="delete"/>
            </rowactions>
            <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
            </massactions>
            <views>
                <view type="standard"/>
            </views>
            <searchfields/>
        </skootable>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-3izS-249"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Photo of Jitendra

Jitendra

  • 72 Points
This actually works.
Photo of Jitendra

Jitendra

  • 72 Points
Thanks, for sharing this Keep updating it. 
https://cardgenerator.io/
Photo of Stephen Sells

Stephen Sells, Alum

  • 17,326 Points 10k badge 2x thumb
This is a known Skuid issue. We'll notify here when a fix goes live.

Allow Scroll Bars" on Tables in Lightning won't show the data in the table on page load unless "Max Table Height (Optional)" is set. And if it is set, it won't appear properly.
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
My temporary fix for this is a "Skuid Page:Rendered" triggered snippet which waits for a second and then re-renders the table via component id:

setTimeout(function () {
    
    skuid.$C('sk-3cxp-3205').render();
}, 1000);
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
Any updates on this? It's driving me round the bend.
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
I can't reproduce the behaviour I'm seeing above when I turn off scroll-bars on the table.
Photo of Stephen Sells

Stephen Sells, Alum

  • 17,326 Points 10k badge 2x thumb
I've been able to reproduce this issue in 11.2.11. We'll be working on it. Thank you again for posting this
Photo of Stephen Sells

Stephen Sells, Alum

  • 17,326 Points 10k badge 2x thumb
Doing a hard reset of the cache in Chrome via View > Developer > Developer Tools > Application > "Clear Site Data" makes this problem intermittent instead of every time. It will work about 60% of the time instead of 0% of the time. At least, this is what we are seeing
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
Thanks Stephen, I'm glad you guys are seeing similar behaviour. It seems to be more likely to occur when larger volumes of data are being loaded into the page (though at volumes that wouldn't have been an issue in the past). It's like the rendering process on the table rows is waiting to be triggered only once the data has returned, but where this trips over for whatever reason (a bit more data or some other interruption) the trigger to display the rows never gets fired (or gets fired too soon?). It's a new problem, as we've been doing stuff in Lightning for some time and it's not been an issue before. I couldn't tell you which version introduced it though, maybe 11.2.9? But I really don't know.
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
In Charity App -> Finance/Membership tabs in org id 00D1t000000GWX9 (you've got access) you can reproduce it pretty much every time. Especially if you refresh the page from those tabs.
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
Hello! Can someone reach out to me on this please as I've just updated to the latest version of Skuid and I still have this issue on a very simple page.
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
I've granted login access (00D1w0000008acv) - head over to the Finance tab and you'll see the issue (in Lightning). I've tried in Incognito mode etc. and still the same thing:


Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
I'm trying it again now with just the simplest example. Try this in a lightning app builder App page - add the tab to an App:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<models>
<model id="Accounts" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account" limit="50">
<fields>
<field id="RecordTypeId"/>
<field id="Name"/>
<field id="Type"/>
<field id="BillingCity"/>
<field id="BillingState"/>
<field id="BillingCountry"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="all" alwaysresetpagination="false" createrecords="false" model="Accounts" buttonposition="" mode="readonly" allowcolumnreordering="true" responsive="true" uniqueid="sk-18nt-117" allowscrollbars="true">
<fields>
<field id="Name" hideable="true" uniqueid="fi-18o0-149"/>
<field id="Type" hideable="true" uniqueid="fi-18o0-150"/>
<field id="BillingCity" hideable="true" uniqueid="fi-18o0-153"/>
<field id="BillingState" hideable="true" uniqueid="fi-18o0-154"/>
<field id="BillingCountry" hideable="true" uniqueid="fi-18o0-155"/>
</fields>
<rowactions>
<action type="multi" label="Run multiple actions" icon="sk-webicon-font-awesome:external-link-square"/>
</rowactions>
<massactions usefirstitemasdefault="true"/>
<views>
<view type="standard"/>
</views>
</skootable>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences uniqueid="sk-18np-110"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>

Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
I'm trying it again now with just the simplest example. Try this in a lightning app builder App page - add the tab to an App:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<models>
<model id="Accounts" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account" limit="50">
<fields>
<field id="RecordTypeId"/>
<field id="Name"/>
<field id="Type"/>
<field id="BillingCity"/>
<field id="BillingState"/>
<field id="BillingCountry"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="all" alwaysresetpagination="false" createrecords="false" model="Accounts" buttonposition="" mode="readonly" allowcolumnreordering="true" responsive="true" uniqueid="sk-18nt-117" allowscrollbars="true">
<fields>
<field id="Name" hideable="true" uniqueid="fi-18o0-149"/>
<field id="Type" hideable="true" uniqueid="fi-18o0-150"/>
<field id="BillingCity" hideable="true" uniqueid="fi-18o0-153"/>
<field id="BillingState" hideable="true" uniqueid="fi-18o0-154"/>
<field id="BillingCountry" hideable="true" uniqueid="fi-18o0-155"/>
</fields>
<rowactions>
<action type="multi" label="Run multiple actions" icon="sk-webicon-font-awesome:external-link-square"/>
</rowactions>
<massactions usefirstitemasdefault="true"/>
<views>
<view type="standard"/>
</views>
</skootable>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences uniqueid="sk-18np-110"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>

Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
I think this, however, might be due to the FontAwesome 4 icon set issue I highlighted a month or so ago. Which is a separate issue. Or maybe the same!
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
I think this, however, might be due to the FontAwesome 4 icon set issue I highlighted a month or so ago. Which is a separate issue. Or maybe the same!
Photo of J.

J., Official Rep

  • 7,846 Points 5k badge 2x thumb
Hi, Louis. First, thanks so much for the simplified repro. They really help us cut to the chase when digging into issues. It looks like we might have a product issue, but I think I may have a found a suitable workaround for you in the meantime. Give your Tables that have Allow Scroll Bars checked a Max Table Height as well:


Photo of Zach McElrath

Zach McElrath, Employee

  • 54,054 Points 50k badge 2x thumb
Official Response
Louis, this should be addressed with our latest Spark maintenance release, 12.1.3, as well as our latest Millau maintenace release, 11.2.23, available from Skuid Releases: https://www.skuid.com/releases/salesforce/
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
Hi Zach, got this installed in the nick of time (system going live today) and the fix looks like it's working. Thanks so much! We installed the Millau release - will be testing Spark later in the month.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,968 Points 20k badge 2x thumb
Whew! Glad to hear the fix worked in time.