1

I'm attempting to create a similiar scroll situation to this:

desiredoutcome

Where the left and right sides are 100% height down to the utility bar and scroll individual. The page should not scroll.

I'm getting this:

enter image description here

Any attempt I make to set the height of scrollWrapper or the containing divs results in the overflow disappearing from the panes and move to the page itself.

Here is the cmp:

<aura:component implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId" >
    <span>
        <span class="hideOverflow reportsReportPage" >


            <div class="pageBody filterOpen" data-aura-rendered-by="3124:0">
                <ui:scrollerWrapper class="stest" >
                    <div id="lipsum">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis est, consequat nec dignissim eget, vehicula a enim. Sed eget eros mattis, luctus dolor non, tincidunt eros. Vivamus molestie metus at quam tempor, ac pretium tortor semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vulputate blandit mauris, facilisis blandit lorem viverra dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac tincidunt metus. Maecenas ultrices mi felis, quis ultrices ex imperdiet eget. Nam ullamcorper id mauris dictum hendrerit. Maecenas egestas orci orci, eget placerat mauris molestie nec.
                        </p>
                        <p>
                            Ut at est sit amet lectus fermentum tempor eu sit amet lectus. Morbi pellentesque quam odio. Etiam tincidunt molestie egestas. Donec sed lorem nec mi aliquam ullamcorper non vel metus. Vestibulum aliquet volutpat neque, a iaculis sem consequat eu. Aliquam vel libero dapibus, varius lectus eget, aliquet dolor. Morbi accumsan urna et laoreet interdum. Nulla in augue ac eros aliquam egestas ac in lectus. Phasellus eleifend magna ac augue congue, quis imperdiet dui sagittis. Curabitur condimentum nisl ante, non luctus augue lobortis ac.
                        </p>
                        <p>
                            In augue mi, rhoncus ac ipsum non, semper rutrum turpis. Nullam cursus imperdiet nisl eget tempus. Vivamus est dolor, ullamcorper a nisi a, congue scelerisque dolor. Maecenas cursus neque quis mi bibendum, nec semper mi vestibulum. Nulla id enim id dolor porta placerat venenatis eu ipsum. Morbi tempor efficitur varius. Vivamus ac sem ullamcorper, efficitur odio id, blandit erat. Vivamus interdum congue nibh, at fermentum nisi venenatis nec. Aenean nec risus ultricies, gravida nisl id, vulputate sem. Praesent eget vulputate metus, quis porta risus. Aenean mi velit, varius eget libero id, luctus feugiat nibh. Nam ornare, nisl in euismod molestie, felis urna tincidunt nulla, vitae luctus risus justo eu urna. Pellentesque urna justo, euismod eu enim vitae, volutpat tristique ex. Nulla sed accumsan erat. Donec tincidunt elit id nibh lacinia ultricies.
                        </p>
                        <p>
                            Mauris ut lectus sit amet arcu facilisis euismod et eget lorem. Suspendisse potenti. Aliquam et dolor vitae felis sodales elementum eget ut dui. Sed mi neque, lobortis ullamcorper ex quis, ullamcorper varius leo. Nulla facilisi. Ut aliquet faucibus molestie. In egestas, ex et porta vehicula, leo metus sagittis ligula, sed pretium lorem nisi accumsan lorem. Proin ornare lorem eget dapibus semper. Pellentesque massa lorem, euismod quis laoreet viverra, interdum sed dui. Phasellus lacinia nunc ac dictum rutrum.
                        </p>
                        <p>
                            Ut vulputate tempor ullamcorper. Nam condimentum felis non laoreet vestibulum. Quisque molestie consectetur sodales. Aliquam ultrices semper semper. Suspendisse consectetur sem id mauris vulputate, sit amet congue tellus dapibus. Proin neque diam, bibendum ac congue quis, facilisis sit amet sapien. Aliquam consectetur nunc a justo volutpat ultricies. Integer ac condimentum libero. Nulla aliquam, augue ac auctor porttitor, lectus velit gravida elit, eu maximus nunc risus vitae mi. Etiam a sem magna. Aliquam ac est a nunc convallis vestibulum nec a massa. Phasellus tristique nulla dui, in ultrices justo rutrum egestas.
                        </p></div>
                </ui:scrollerWrapper>
                <ui:scrollerWrapper class="stest" >
                    <div id="lipsum">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis est, consequat nec dignissim eget, vehicula a enim. Sed eget eros mattis, luctus dolor non, tincidunt eros. Vivamus molestie metus at quam tempor, ac pretium tortor semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vulputate blandit mauris, facilisis blandit lorem viverra dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac tincidunt metus. Maecenas ultrices mi felis, quis ultrices ex imperdiet eget. Nam ullamcorper id mauris dictum hendrerit. Maecenas egestas orci orci, eget placerat mauris molestie nec.
                        </p>
                        <p>
                            Ut at est sit amet lectus fermentum tempor eu sit amet lectus. Morbi pellentesque quam odio. Etiam tincidunt molestie egestas. Donec sed lorem nec mi aliquam ullamcorper non vel metus. Vestibulum aliquet volutpat neque, a iaculis sem consequat eu. Aliquam vel libero dapibus, varius lectus eget, aliquet dolor. Morbi accumsan urna et laoreet interdum. Nulla in augue ac eros aliquam egestas ac in lectus. Phasellus eleifend magna ac augue congue, quis imperdiet dui sagittis. Curabitur condimentum nisl ante, non luctus augue lobortis ac.
                        </p>
                        <p>
                            In augue mi, rhoncus ac ipsum non, semper rutrum turpis. Nullam cursus imperdiet nisl eget tempus. Vivamus est dolor, ullamcorper a nisi a, congue scelerisque dolor. Maecenas cursus neque quis mi bibendum, nec semper mi vestibulum. Nulla id enim id dolor porta placerat venenatis eu ipsum. Morbi tempor efficitur varius. Vivamus ac sem ullamcorper, efficitur odio id, blandit erat. Vivamus interdum congue nibh, at fermentum nisi venenatis nec. Aenean nec risus ultricies, gravida nisl id, vulputate sem. Praesent eget vulputate metus, quis porta risus. Aenean mi velit, varius eget libero id, luctus feugiat nibh. Nam ornare, nisl in euismod molestie, felis urna tincidunt nulla, vitae luctus risus justo eu urna. Pellentesque urna justo, euismod eu enim vitae, volutpat tristique ex. Nulla sed accumsan erat. Donec tincidunt elit id nibh lacinia ultricies.
                        </p>
                        <p>
                            Mauris ut lectus sit amet arcu facilisis euismod et eget lorem. Suspendisse potenti. Aliquam et dolor vitae felis sodales elementum eget ut dui. Sed mi neque, lobortis ullamcorper ex quis, ullamcorper varius leo. Nulla facilisi. Ut aliquet faucibus molestie. In egestas, ex et porta vehicula, leo metus sagittis ligula, sed pretium lorem nisi accumsan lorem. Proin ornare lorem eget dapibus semper. Pellentesque massa lorem, euismod quis laoreet viverra, interdum sed dui. Phasellus lacinia nunc ac dictum rutrum.
                        </p>
                        <p>
                            Ut vulputate tempor ullamcorper. Nam condimentum felis non laoreet vestibulum. Quisque molestie consectetur sodales. Aliquam ultrices semper semper. Suspendisse consectetur sem id mauris vulputate, sit amet congue tellus dapibus. Proin neque diam, bibendum ac congue quis, facilisis sit amet sapien. Aliquam consectetur nunc a justo volutpat ultricies. Integer ac condimentum libero. Nulla aliquam, augue ac auctor porttitor, lectus velit gravida elit, eu maximus nunc risus vitae mi. Etiam a sem magna. Aliquam ac est a nunc convallis vestibulum nec a massa. Phasellus tristique nulla dui, in ultrices justo rutrum egestas.
                        </p></div>
                </ui:scrollerWrapper>
                <div class="sidebar filterOpen" data-aura-rendered-by="3173:0">
                    <div data-aura-rendered-by="3176:0" class="reportsReportSidebar" data-aura-class="reportsReportSidebar">
                        <div class="stackingPanel fadeIn" data-aura-rendered-by="3177:0">
                            <div class="filterPanelContainer reportsFilterPanel" data-aura-rendered-by="3180:0" data-aura-class="reportsFilterPanel">
                                <div class="panelHeader" data-aura-rendered-by="3181:0">
                                    <div class="centered-header" data-aura-rendered-by="3182:0">
                                        <button class="slds-button slds-button--neutral cancelButton hidden uiButton" aria-live="off" type="button" title="Click to cancel changes" data-aura-rendered-by="3185:0" data-aura-class="uiButton">
                                            <!--render facet: 3186:0--><span class="cancelButtonLabel label bBody truncate" dir="ltr" data-aura-rendered-by="3188:0">Cancel</span><!--render facet: 3190:0-->
                                        </button>
                                    </div>
                                    <h2 class="panelTitle centered-header" data-aura-rendered-by="3191:0">Filters</h2>
                                    <div class="centered-header" data-aura-rendered-by="3193:0">
                                        <button class="slds-button slds-button--neutral applyButton hidden uiButton--default uiButton--brand uiButton" aria-live="off" type="button" title="Click to apply changes" data-aura-class="uiButton--default uiButton--brand uiButton" data-aura-rendered-by="3196:0">
                                            <!--render facet: 3197:0--><span class="applyButtonLabel label bBody truncate" dir="ltr" data-aura-rendered-by="3199:0">Apply</span><!--render facet: 3201:0-->
                                        </button>
                                        <a class="close" href="javascript:void(0);" data-aura-rendered-by="3202:0">
                                            <span class="slds-icon_container slds-icon-utility-back slds-button__icon forceIcon" data-aura-rendered-by="3207:0" data-aura-class="forceIcon">
                                                <span data-aura-rendered-by="3210:0">

                                                </span>
                                                <span class="slds-assistive-text" data-aura-rendered-by="3212:0">Close</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="vert-scroller" data-aura-rendered-by="3214:0">
                                    <!--render facet: 3215:0--><!--render facet: 3219:0-->
                                    <ul class="editableFilters" data-aura-rendered-by="3223:0">
                                        <!--render facet: 3224:0-->
                                        <li class="filterCardContainer editable reportsFilterCard" data-filtercmp="filterSingleSelectPicklistWidget" title="All projects" data-aura-rendered-by="4:7415;a" data-aura-class="reportsFilterCard">
                                            <div data-aura-rendered-by="5:7415;a">
                                                <a class="filterCardEditor" href="javascript:void(0);" data-aura-rendered-by="7:7415;a">
                                                    <div class="filterCard" data-aura-rendered-by="8:7415;a">
                                                        <div class="header" data-aura-rendered-by="9:7415;a"><span class="field" data-aura-rendered-by="10:7415;a">Show Me&nbsp;</span></div>
                                                        <div class="filterCardBody" data-aura-rendered-by="13:7415;a">
                                                            <!--render facet: 14:7415;a--><span class="uiOutputText" data-aura-rendered-by="21:7415;a" data-aura-class="uiOutputText">All projects</span>
                                                        </div>
                                                    </div>
                                                </a>
                                                <!--render facet: 16:7415;a--><!--render facet: 17:7415;a-->
                                            </div>
                                            <!--render facet: 18:7415;a-->
                                        </li>
                                        <li class="filterCardContainer editable reportsFilterCard" data-filtercmp="filterStandardDateWidget" title="This Week (Aug 6, 2017 - Aug 12, 2017)" data-aura-rendered-by="25:7415;a" data-aura-class="reportsFilterCard">
                                            <div data-aura-rendered-by="26:7415;a">
                                                <a class="filterCardEditor" href="javascript:void(0);" data-aura-rendered-by="28:7415;a">
                                                    <div class="filterCard" data-aura-rendered-by="29:7415;a">
                                                        <div class="header" data-aura-rendered-by="30:7415;a"><span class="field" data-aura-rendered-by="31:7415;a">End Date Time&nbsp;</span></div>
                                                        <div class="filterCardBody" data-aura-rendered-by="34:7415;a">
                                                            <!--render facet: 35:7415;a--><span class="cardValue uiOutputText" data-aura-rendered-by="42:7415;a" data-aura-class="uiOutputText">This Week</span><span class="cardValue uiOutputText" data-aura-rendered-by="45:7415;a" data-aura-class="uiOutputText">(Aug 6, 2017 - Aug 12, 2017)</span>
                                                        </div>
                                                    </div>
                                                </a>
                                                <!--render facet: 37:7415;a--><!--render facet: 38:7415;a-->
                                            </div>
                                            <!--render facet: 39:7415;a-->
                                        </li>
                                        <!--render facet: 3238:0-->
                                    </ul>
                                    <!--render facet: 3239:0--><!--render facet: 3240:0--><!--render facet: 3243:0--><!--render facet: 3274:0-->
                                </div>
                            </div>
                        </div>
                        <div class="stackingPanel fadeOut" data-aura-rendered-by="3303:0">
                            <div data-aura-rendered-by="3306:0" class="reportsFeedPanel" data-aura-class="reportsFeedPanel">
                                <div class="panelHeader" data-aura-rendered-by="3307:0">
                                    <h2 class="panelTitle" data-aura-rendered-by="3308:0">Chatter</h2>
                                    <a class="close centered-header" href="javascript:void(0);" data-aura-rendered-by="3310:0">
                                        <span class="slds-icon_container slds-icon-utility-back slds-button__icon forceIcon" data-aura-rendered-by="3315:0" data-aura-class="forceIcon">
                                            <span data-aura-rendered-by="3318:0">

                                            </span>
                                            <span class="slds-assistive-text" data-aura-rendered-by="3320:0">Close</span>
                                        </span>
                                    </a>
                                </div>
                                <div class="vert-scroller" data-aura-rendered-by="3322:0">
                                    <!--render facet: 3323:0-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </span>
    </span>
</aura:component>

and the .css

.THIS .reportsReportPage.hideOverflow {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-flow:column; -ms-flex-flow:column; flex-flow:column; position:absolute; width:100%; height:100%; overflow:hidden; background-color:#fff}
.THIS .reportsReportPage .header {position:relative; -webkit-flex:0 0 auto}
.THIS .reportsReportPage .pageBody {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-flow:row; -ms-flex-flow:row; flex-flow:row; -webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; min-height:1px; width:100%; -webkit-transition:width .2s ease-out; transition:width .2s ease-out; overflow:hidden}
.THIS .reportsReportPage .reportSpinner.hidden {display:none}
.THIS .reportsReportPage .reportSpinner.hidden, .THIS .reportsReportPage .eclair-container.hidden, .THIS .reportsReportPage .pageBody.hidden, .THIS .reportsReportPage .trendInWaveDashboardContainer.hidden {display:none}
.THIS .reportsReportPage .scrollarea {-webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; background-color:rgb(238, 241, 246); overflow:auto}
.THIS .reportsReportPage .scrollarea:focus {outline:0}
.THIS .reportsReportPage .sidebar {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-flow:column; -ms-flex-flow:column; flex-flow:column; min-width:1px; background-color:white; border-left:solid 1px #cfd4d9; border-bottom:solid 1px #cfd4d9; -webkit-transition:width .2s ease-out,min-width .2s ease-out; transition:width .2s ease-out,min-width .2s ease-out; overflow:hidden}
.THIS .reportsReportPage .sidebar.filterOpen {min-width:275px}
.THIS .reportsReportPage .sidebar.feedOpen {min-width:500px}

Any suggestions or thoughts would be appreciated.

2
  • You can use your browser's "Inspect" feature to see what HTML/CSS the page you want to copy is using and borrow as much as possible from that. But don't be surprised if the CSS is different to the current SLDS. – Keith C Aug 9 '17 at 18:50
  • That's what you're seeing above. I started with the markup from the report page, and had no luck. I was able to get close with the ui:scrollerWrappers, but can't seem to close the gap. There must be something fundamentally different in the LEX wrappers between record pages and other places in SF. I just can't seem to track it down. – wellmstein Aug 9 '17 at 18:56
0

I'm an idiot. If I switch the containing spans to divs (display: block) I can set the height with something like: calc(100vh - 340px)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.