html - Box-shadow and overflow: scroll -


i using 3 bootstrap panels panel headings col-md-4, @ bottom of each panel have box-shadow , panels have max height of 300px. text inside panels longer panels themselves. use overflow: scroll when use overflow: scroll "overwrites" box-shadow (of which, understand why). have searched seemingly simple solution while , have come nothing.

i have excluded box-shadow style , other 2 panels keep clean underneath.

    [fiddle][1]         .sub-content-panel {         height: 400px;         border-radius: 5px;         position: relative;         color: black;         }          <div class="col-md-4 text-border">         <a href="gallery.php">             <div class="panel panel-default sub-content-panel">                 <div class="panel-heading sub-content-panel-heading">                     <p><i class="fa fa-commenting-o"></i>about us</p>                 </div>                 <div class="panel-body">                     <p>with 35 years experience furniture designer , builder, , son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes business skills, practiced sense of aesthetics, creative elements, , knowledge of wood. curtis contributes knowledge of construction techniques , materials, experience in whole house renovations, , skill in kitchen , bath remodels. our focus on customer satisfaction, quality workmanship, attention detail , inspired solutions. priority naso remodel yield little impact on customers environment possible while work in progress.</p>                 </div>             </div>         </a>           </div>     .sub-content-panel:before, .sub-content-panel:after{     z-index: -1;     position: absolute;     content: "";     bottom: 15px;     left: 10px;     width: 50%;     top: 80%;     max-width:300px;     background: #777;     -webkit-box-shadow: 0 15px 10px #777;     -moz-box-shadow: 0 15px 10px #777;     box-shadow: 0 15px 10px #777;     -webkit-transform: rotate(-3deg);     -moz-transform: rotate(-3deg);     -o-transform: rotate(-3deg);     -ms-transform: rotate(-3deg);     transform: rotate(-3deg);     }      .sub-content-panel:after{      -webkit-transform: rotate(3deg);     -moz-transform: rotate(3deg);     -o-transform: rotate(3deg);     -ms-transform: rotate(3deg);     transform: rotate(3deg);     right: 10px;     left: auto;     }     [1]: https://jsfiddle.net/2jufan88/ 

try using overflow-y: auto;.

body, html {    margin: 10px;  }  .panel.panel-default.sub-content-panel {    max-height: 400px;    border-radius: 5px;    position: relative;    color: black;    overflow-y: auto;    -webkit-box-shadow: 0 15px 10px #777;    -moz-box-shadow: 0 15px 10px #777;    box-shadow: 0 15px 10px #777;  }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />  <div class="col-md-4 text-border">    <a href="gallery.php">      <div class="panel panel-default sub-content-panel">        <div class="panel-heading sub-content-panel-heading">          <p><i class="fa fa-commenting-o"></i> us</p>        </div>        <div class="panel-body">          <p>with 35 years experience furniture designer , builder, , son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes business skills, practiced sense of aesthetics, creative elements,            , knowledge of wood. curtis contributes knowledge of construction techniques , materials, experience in whole house renovations, , skill in kitchen , bath remodels. our focus on customer satisfaction, quality workmanship,            attention detail , inspired solutions. priority naso remodel yield little impact on customers environment possible while work in progress 35 years experience furniture designer , builder, ,            son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes business skills, practiced sense of aesthetics, creative elements, , knowledge of wood. curtis contributes knowledge of construction            techniques , materials, experiencessible while work in progress 35 years experience furniture designer , builder, , son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes            business skills, practiced sense of aesthetics, creative elements, , knowledge of wood. curtis contributes knowledge of construction techniques , materials, experiencessible while work in progress 35 years experience            furniture designer , builder, , son curtis, 15 years of remodeling experience, have combined talents in remodel. contributes business skills, practiced sense of aesthetics, creative elements, , knowledge of wood. curtis            contributes knowledge of construction techniques , materials, experience in whole house renovations, , skill in kitchen , bath remodels. our focus on customer satisfaction, quality workmanship, attention detail ,            inspired solutions. priority naso remodel yield little impact on customers environment possible while work in progress.</p>        </div>      </div>    </a>  </div>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -