Sliding panel display issue - HTML elements "underneath" are displayed

  • 2
  • Problem
  • Updated 11 months ago
  • Solved
When using a sliding panel set to "Overlay", it is not overlaying all the elements underneath it correctly.  Instead, some elements from "underneath" are visible on the sliding panel.  In short, the panel is not the "top most" element (z-order).

Note - It appears that the issue at https://community.skuid.com/skuid/topics/sliding-panel-not-top-most-element-recent-items is the same or very similar but that thread has died out so posting here in hopes that it will be addressed.

Base Page



Slide From Left:



Slide From Right


Steps to reproduce:

1) Create page using XML below
2) Preview page

Expected Behavior
Panel should be topmost element and not contain any elements from below it on the page

Actual Behavior
Some elements are visible on the panel that are not part of the panel but instead part of the page "underneath"

Sample XML

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Account">    <models>
        <model id="Account" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account" type="">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Account" uniqueid="sk-aJFlj-87">
            <maintitle>
                <template>{{Model.labelPlural}}</template>
            </maintitle>
            <subtitle>
                <template>Home</template>
            </subtitle>
            <actions>
                <action type="savecancel"/>
            </actions>
        </pagetitle>
        <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" mode="read" allowcolumnreordering="true" uniqueid="sk-aJFlj-88">
            <fields>
                <field id="Name" hideable="true" allowordering="true" uniqueid="fi-aJEhx-256"/>
                <field id="CreatedDate" hideable="true" allowordering="true" uniqueid="fi-aJEhy-257"/>
            </fields>
            <rowactions>
                <action type="multi" label="Show Sliding Panel" icon="sk-icon-magic">
                    <actions>
                        <action type="openSlidingPanel">
                            <panel title="Sliding Panel Contents" uniqueid="sk-aJSul-111" size="350px" origin="left" closeonpageclick="true" behavior="overlay">
                                <components>
                                    <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-aJUMR-115" mode="read">
                                        <columns>
                                            <column width="100%">
                                                <sections>
                                                    <section title="Section A">
                                                        <fields>
                                                            <field id="Name" valuehalign="" type=""/>
                                                            <field id="CreatedDate" valuehalign="" type=""/>
                                                        </fields>
                                                    </section>
                                                </sections>
                                            </column>
                                        </columns>
                                    </basicfieldeditor>
                                </components>
                            </panel>
                        </action>
                    </actions>
                </action>
            </rowactions>
            <massactions usefirstitemasdefault="true"/>
            <views>
                <view type="standard"/>
            </views>
        </skootable>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 2 years ago

  • 2
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,030 Points 10k badge 2x thumb
Official Response
Thank you for your patience! Skuid has fixed the issue you raised in the new 11.0.3 and 10.0.13 release which are 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. Please let us know if you continue to encounter any problems with this issue after upgrading.
 
Thanks again for alerting us of these issues!