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

Barry SchnellBarry Schnell 💎💎
edited February 4 in Problems
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
image


Slide From Left:
image


Slide From Right
image

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>

Comments

  • Amy DewaalAmy Dewaal ✭✭
    edited May 2018
    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
  • Barry SchnellBarry Schnell 💎💎
    edited February 2017
    Thanks for confirming Amy!
  • edited September 2017
    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;
    }
  • Mark DeSimoneMark DeSimone 🛠️ 
    edited February 4
    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!
Sign In or Register to comment.