i'm trying create horizontal scrolling area sidebar, not scrollable. want create without using position: fixed; can't make work. missing?
html
<div class="sidebar"> <h1 class="logo">title</h1> </div> <div class="scroll-area"> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. animi harum, magnam, ducimus corporis ipsam blanditiis possimus voluptate obcaecati laboriosam dicta quidem perspiciatis ipsa tenetur. asperiores veritatis dicta doloremque. ea, ad. </p> <div class="image-gallery"> <ul> <li><img src="http://placehold.it/500x800"></li> <li><img src="http://placehold.it/500x800"></li> <li><img src="http://placehold.it/500x800"></li> </ul> </div> </div> css
.scroll-area { width: 3000px; overflow: scroll; } ul li { display: inline; } edit
i've created fiddle visualize issue. now, sidebar scrolling content.
here example achieves believe you're trying do. replace code needed.
html:
<!-- button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal">launch report</button> <div id="mymodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">close</span> </button> <h4 class="modal-title" id="mymodallabel"> annuities report</h4> </div> <pre class="report-pre modal-body report-modal-body"> individual annuities agency agent detail commissionable deposits month date agency number agency name flexible annuity spia spda variable annuity total agent # agent name count 1st year external internal subsequent total count 1st year external internal total count 1st year external internal total count 1st year external internal subsequent total count 1st year external internal subsequent total ----------------------------------------------------------------- ------------------------------------------------------ ------------------------------------------------------ ----------------------------------------------------------------- ---------------------------------------------------------------- en00000006 poe - james ag00000001 poe, henry 1.00 2,512 25,812 0 450 28,775 .00 0 0 0 0 .00 0 0 0 0 .00 0 0 0 1,741 1,741 1.00 2,512 25,812 0 2,191 30,516 ag00050001 eve, .00 0 0 0 0 0 .00 0 0 0 0 .00 0 0 0 0 .00 52 0 0 3,081 3,133 .00 52 0 0 3,081 3,133 ag000400 bob, .00 30 0 0 100 130 .00 0 0 0 0 .00 0 0 0 0 .00 166 0 0 370 536 .00 196 0 0 470 666 1.00 2,542 25,812 0 550 28,905 .00 0 0 0 0 .00 0 0 0 0 .00 218 0 0 5,192 5,410 1.00 2,760 25,812 0 5,742 34,315 en00000010 lost agent ag00005 jim, ri .00 0 0 0 0 0 .00 0 0 0 0 .00 0 0 0 0 .00 0 0 0 100 100 .00 0 0 0 100 100 .00 0 0 0 0 0 .00 0 0 0 0 .00 0 0 0 0 .00 0 0 0 100 100 .00 0 0 0 100 100 </pre> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> <!-- /.modal-dialog --> </div> css:
.report-modal-body { max-height:calc(100vh - 150px); overflow-y:auto; overflow-x:auto; } .report-pre { width:100%; overflow-x:auto; word-wrap:normal; margin:1px; } 
Comments
Post a Comment