css - Handling overflow on fixed height, scrollable containers -
i'm trying annotate specific funtionality in app, , annotations appear side of column of content. column fixed height custom scrollers, need overflow y auto or scroll - , overflow-x visible, annotation visible.
i know isn't possible setting auto/visible on same element, have seen solutions on column set overflow-y auto, , wrapper set overflow visible - can't working.
i have jsbin set current implementation - https://jsbin.com/woduciv/edit?html,css,output
essentially:
.wrapper { position: absolute; height: 100%; width: 100%; } .column { position: fixed; left: 0; height: 100%; width: 25%; overflow: visible; } .column__content { position: static; overflow-y: scroll; height: 100%; width: 100%; } does know solution have x axis visibly, , y scroll enabled?
thank :)
try this:
body { height: 100%; margin: 0; font-family: 'unica one', sans-serif; background: #fff; } .custom-panel { border-radius: 0; height: 300px; overflow: scroll; padding: 15px; width: 400px; } .custom-panel p { min-width: 500px; width: 100%; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="col-sm-6"> <div class="panel custom-panel"> <p> "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </div> </div> hope you!!
Comments
Post a Comment