Skip to main content

Sample Center Slide Panel - CSS styling issue

Martin Rees

Good morning,

I liked the look of the Slide Panel in the Sample Center so I thought I would try to incorporate it into some work I was doing.  This leads to me a formatting issue caused by the following CSS in SlideInPanel.css:

::after, *::before {
  content: '';
}

I want to put an Analysis Grid in the page, here is where the formatting issue comes in.  For some reason the above CSS causes some of the AG content to be centered.  If I remove these pseudo-classes then the AG displays as it should, but of course the slide panel loses some functionality such as displaying the close icon and "dimming" the main content when the panel is active.

I'm not great with CSS, i've tried creating a class that targets the AG that sets the ::after and ::before content to none.  But this did not work.

I've included an example report definition below that should work when added to the Logi Sample Center app.  I've kept it as close to the Logi original as possible so there should not be any of my attempted tweaks to resolve it in there!

<?xml version="1.0" encoding="utf-8"?>
<Report
    Caption="Slide Panel | @Constant.TitleCaption~"
    ID="Components.SlidePanelWithContent"
    >
    <MasterReport
        Report="MasterReport"
    />
    <StyleSheet
        StyleSheet="Sidebar.SlideInPanel.css"
    />
    <StyleSheet
        StyleSheet="Sidebar.RotateButton.css"
    />
    <Body>
        <Division
            Class="cd-main-content"
            HtmlDiv="True"
            >
            <Division
                Class="display-1 border-bottom pb-3"
                HtmlDiv="True"
                ID="divPageHeader"
                >
                <Label
                    Caption="Slide In Panel"
                    HtmlTag="H1"
                    >
                    <Note
                        Note="https://codyhouse.co/gem/css-slide-in-panel/"
                    />
                </Label>
                <Label
                    Caption="Quickly show side content, notifications or profile information."
                    Class="lead mb-0"
                    HtmlTag="P"
                />
            </Division>
            <IncludeSharedElement
                DefinitionFile="Shared.Elements"
                SharedElementID="_shrdRequirements"
                >
                <PassedSharedElement
                    ID="pseRequirements"
                    >
                    <DataLayer
                        ID="dlRequirement"
                        Type="Static"
                        >
                        <IncludeSharedElement
                            DefinitionFile="Shared.Elements"
                            SharedElementID="_shrdFramework"
                        />
                        <StaticDataRow
                            Caption="Include Sidebar in Logi Info Application"
                            FileName="Sidebar"
                            popupContent="&lt;StyleSheet ShowModes=&quot;rdBrowser&quot; StyleSheet=&quot;Sidebar.SlideInPanel.css&quot; /&gt;"
                        />
                        <SequenceColumn
                            ID="sqCol"
                        />
                    </DataLayer>
                </PassedSharedElement>
            </IncludeSharedElement>
            <Division
                Class="card"
                HtmlDiv="True"
                ID="dvInfo"
                >
                <Division
                    Class="card-header"
                    HtmlDiv="True"
                    >
                    <Label
                        Caption="Example"
                        HtmlTag="H4"
                    />
                </Division>
                <Division
                    Class="card-body"
                    HtmlDiv="True"
                    >
                    <Label
                        Caption="Use &lt;code&gt;.from-right&lt;/code&gt; to slide in from the right.  Use &lt;code&gt;.from-left&lt;/code&gt; to slide in (guess what?) from the left. "
                        Format="HTML"
                        HtmlTag="P"
                    />
                    <AnalysisGrid
                        AjaxPaging="True"
                        DraggableColumns="True"
                        ID="AnalysisGrid1"
                        ShowPageNumber="True"
                        SortArrows="True"
                        >
                        <DataLayer
                            ID="StaticDataLayer1"
                            Type="Static"
                            >
                            <StaticDataRow
                                Column1="1"
                                Column2="2"
                                Column3="3"
                            />
                            <StaticDataRow
                                Column1="3"
                                Column2="4"
                                Column3="5"
                            />
                        </DataLayer>
                        <AnalysisGridColumn
                            DataColumn="Column1"
                            DataType="Number"
                            Header="Column1"
                            ID="colColumn1"
                        />
                        <AnalysisGridColumn
                            DataColumn="Column2"
                            DataType="Number"
                            Header="Column2"
                            ID="colColumn2"
                        />
                        <AnalysisGridColumn
                            DataColumn="Column3"
                            DataType="Number"
                            Header="Column3"
                            ID="colColumn3"
                        />
                        <WaitPage/>
                    </AnalysisGrid>
                    <Division
                        Class="container-fluid"
                        HtmlDiv="True"
                        >
                        <Division
                            Class="btn-rotate right"
                            >
                            <Label
                                Caption="Filter"
                            />
                            <Action
                                Javascript="$(&apos;.cd-panel.from-right&apos;).addClass(&apos;is-visible&apos;);"
                                Type="Javascript"
                            />
                        </Division>
                        <LineBreak
                            LineCount="2"
                        />
                    </Division>
                </Division>
                <Division
                    Class="card-footer p-0"
                    HtmlDiv="True"
                    >
                    <Division
                        Class="copy-wrapper"
                        HtmlDiv="True"
                        >
                        <Label
                            Class="btnCopy ti-files"
                            ID="btnCopy"
                            >
                            <Action
                                Javascript="void(0)"
                                Type="Javascript"
                            />
                        </Label>
                        <Division
                            Class="pre-well"
                            HtmlDiv="True"
                            >
                            <Label
                                Caption="&lt;Division Class=&quot;cd-main-content&quot; HtmlDiv=&quot;True&quot;&gt;
  &lt;Button Caption=&quot;Left Flyout&quot; Class=&quot;cd-btn&quot;&gt;
    &lt;Action Javascript=&quot;$(&apos;.cd-panel.from-left&apos;).addClass(&apos;is-visible&apos;);&quot; Type=&quot;Javascript&quot; /&gt;
  &lt;/Button&gt;
&lt;/Division&gt;
&lt;Division Class=&quot;cd-panel from-right&quot; HtmlDiv=&quot;True&quot;&gt;
  &lt;Division Class=&quot;cd-panel-header&quot; HtmlDiv=&quot;True&quot;&gt;
    &lt;Label Caption=&quot;Title Goes Here&quot; HtmlTag=&quot;H4&quot; /&gt;
    &lt;Label Class=&quot;cd-panel-close&quot;&gt;
      &lt;Action Javascript=&quot;void(0)&quot; Type=&quot;Javascript&quot; /&gt;
    &lt;/Label&gt;
  &lt;/Division&gt;
  &lt;Division Class=&quot;cd-panel-container&quot; HtmlDiv=&quot;True&quot;&gt;
    &lt;Division Class=&quot;cd-panel-content&quot; HtmlDiv=&quot;True&quot;&gt;
      &lt;Label Caption=&quot;Content Goes Here&quot; /&gt;
    &lt;/Division&gt;
  &lt;/Division&gt;
&lt;/Division&gt;"
                                Class="html"
                                HtmlTag="pre"
                            />
                            <Label
                                Caption="/*START INCLUDE SCRIPT ELEMENT...*/
$(document).ready(function($){
  //clode the lateral panel
  $(&apos;.cd-panel&apos;).on(&apos;click&apos;, function(event){
    if( $(event.target).is(&apos;.cd-panel&apos;) || $(event.target).is(&apos;.cd-panel-close&apos;) ) { 
      $(&apos;.cd-panel&apos;).removeClass(&apos;is-visible&apos;);
      event.preventDefault();
    }
  });
});
/*...END INCLUDE SCRIPT*/"
                                Class="javascript"
                                HtmlTag="pre"
                            />
                            <Label
                                Caption="&lt;Button Caption=&quot;Right Flyout&quot; Class=&quot;cd-btn&quot;&gt;
  &lt;Action Javascript=&quot;$(&apos;.cd-panel.from-right&apos;).addClass(&apos;is-visible&apos;);&quot; Type=&quot;Javascript&quot; /&gt;
&lt;/Button&gt;
&lt;Division Class=&quot;cd-panel from-right&quot; HtmlDiv=&quot;True&quot; ID=&quot;divFromRight&quot;&gt;
  &lt;Division Class=&quot;cd-panel-header&quot; HtmlDiv=&quot;True&quot; ID=&quot;divHeader&quot;&gt;
    &lt;Label Caption=&quot;Title Goes Here&quot; HtmlTag=&quot;H4&quot; /&gt;
    &lt;Label Class=&quot;cd-panel-close&quot;&gt;
      &lt;Action Javascript=&quot;void(0)&quot; Type=&quot;Javascript&quot; /&gt;
    &lt;/Label&gt;
  &lt;/Division&gt;
  &lt;Division Class=&quot;cd-panel-container&quot; HtmlDiv=&quot;True&quot; ID=&quot;divPanelContainer&quot;&gt;
    &lt;Division Class=&quot;cd-panel-content&quot; HtmlDiv=&quot;True&quot; ID=&quot;divPanelContent&quot;&gt;
      &lt;Label Caption=&quot;Content Goes Here&quot; /&gt;
    &lt;/Division&gt;
  &lt;/Division&gt;
&lt;/Division&gt;
&lt;IncludeScript IncludedScript=&quot;$(document).ready(function($){&amp;#xD;&amp;#xA;    //clode the lateral panel&amp;#xD;&amp;#xA;    $(&apos;.cd-panel&apos;).on(&apos;click&apos;, function(event){&amp;#xD;&amp;#xA;        if( $(event.target).is(&apos;.cd-panel&apos;) || $(event.target).is(&apos;.cd-panel-close&apos;) ) { &amp;#xD;&amp;#xA;            $(&apos;.cd-panel&apos;).removeClass(&apos;is-visible&apos;);&amp;#xD;&amp;#xA;            event.preventDefault();&amp;#xD;&amp;#xA;        }&amp;#xD;&amp;#xA;    });&amp;#xD;&amp;#xA;});&quot; /&gt;"
                                Class="ThemeHidden"
                                ID="copyXMLElement"
                            />
                        </Division>
                    </Division>
                </Division>
            </Division>
        </Division>
        <Division
            Class="cd-panel from-right"
            HtmlDiv="True"
            ID="divFromRight"
            >
            <Division
                Class="cd-panel-header"
                HtmlDiv="True"
                ID="divHeader"
                >
                <Label
                    Caption="Title Goes Here"
                    HtmlTag="H4"
                />
                <Label
                    Class="cd-panel-close"
                    >
                    <Action
                        Javascript="void(0)"
                        Type="Javascript"
                    />
                </Label>
            </Division>
            <Division
                Class="cd-panel-container"
                HtmlDiv="True"
                ID="divPanelContainer"
                >
                <Division
                    Class="cd-panel-content"
                    HtmlDiv="True"
                    ID="divPanelContent"
                    >
                    <Label
                        Caption="Content Goes Here"
                    />
                </Division>
            </Division>
        </Division>
        <Division
            Class="cd-panel from-left"
            HtmlDiv="True"
            ID="divFromLeft"
            >
            <Division
                Class="cd-panel-header"
                HtmlDiv="True"
                ID="divHeader"
                >
                <Label
                    Caption="Title Goes Here"
                    HtmlTag="H4"
                />
                <Label
                    Class="cd-panel-close"
                    >
                    <Action
                        Javascript="void(0)"
                        Type="Javascript"
                    />
                </Label>
            </Division>
            <Division
                Class="cd-panel-container"
                HtmlDiv="True"
                ID="divPanelContainer"
                >
                <Division
                    Class="cd-panel-content"
                    HtmlDiv="True"
                    ID="divPanelContent"
                    >
                    <Label
                        Caption="Content Goes Here"
                    />
                </Division>
            </Division>
        </Division>
        <IncludeScript
            IncludedScript="jQuery(document).ready(function($){
    //clode the lateral panel
    $(&apos;.cd-panel&apos;).on(&apos;click&apos;, function(event){
        if( $(event.target).is(&apos;.cd-panel&apos;) || $(event.target).is(&apos;.cd-panel-close&apos;) ) { 
            $(&apos;.cd-panel&apos;).removeClass(&apos;is-visible&apos;);
            event.preventDefault();
        }
    });
});"
        />
    </Body>
    <ideTestParams/>
</Report>

Regards

Martin Rees

0

Comments

2 comments

Date Votes
  • VISUI
    • Logi Info Ninja

    The LambdaEx Slide Panel looks to be a simplification to the Slide-In Panel shared element I created for the 2016 Logi User Conference.

    If the css you specified is needed for the slide panel, but not needed for the rest of the document, you should made the selector more specific.  The following css is basically selecting all elements by using the asterisks and placing empty content before and after it.

    *::after, *::before {
      content: '';
    }

    To make this selector more specific, prefix the selector with a css class or element id.

    .cd-panel *::after, .cd-panel *::before {
      content: '';
    }

     

     

     

     

    1
  • Martin Rees

    Thanks again VISUI, this has helped a great deal  I can't work out how to target the correct class to ensure that the main content Div still "dims" when the slideout is visible.  But the above change does allow the slideout panel to work correctly AND the AG be to be displayed correctly!

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post