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

  • 2
  • Problem
  • Updated 2 years 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,336 Points 10k badge 2x thumb

Posted 2 years ago

  • 2
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,320 Points 5k badge 2x thumb
Barry,

Thanks so much for these details! We've notified our developers of this bug and we'll let you know when a future release fixes this issue
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,336 Points 10k badge 2x thumb
Thanks for confirming Amy!
Photo of Josef Lagorio

Josef Lagorio

  • 3,260 Points 3k badge 2x thumb
Any updates on this being fixed?

*Edit* Modifying the z-index was a temporary workaround for me. 

.sk-pagepanel.sk-pagepanel-overlay {
    z-index: 100;
}
(Edited)
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 12,054 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!