I am using accordion. Here, Accordion functionality is working. I want to insert vertical, and Horizontal scrollbar in body content. How to add scroll bar inside of the panel-body content. I have included the the fiddle and code.
FIDDLE
html, body {
background-color:#e9eaed;
}
.content {
width:960px;
height:0px;
margin-right: auto;
margin-left: auto;
}
.panel-group {
width:430px;
z-index: 100;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
}
.panel-heading {
width: 430px;
}
.panel-title {
height:18px
}
.panel-title a {
float:right;
text-decoration:none;
padding: 10px 430px;
margin: -10px -430px;
}
.panel-body {
height:830px;
transform: rotate(90deg);
transform-origin: 188px 241px 0;
}
.panel-group img {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
}
.panel-group p {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
}
.panel-group .panel img {
margin-left:400px;
position: absolute;
}<div class="container">
<div class="row">
<div class="content">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Accordion 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p><h1>Title</h1><br>A paragraph of text about something pertinant to the site which people could read should the feel the need to read about it. They could skip it as well but this keeps the initial view a good deal less text heavy, see?<br>- Some Source</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>I am using accordion. Here, Accordion functionality is working. I want to insert vertical, and Horizontal scrollbar in body content. How to add scroll bar inside of the panel-body content. I have included the the fiddle and code.
FIDDLE
html, body {
background-color:#e9eaed;
}
.content {
width:960px;
height:0px;
margin-right: auto;
margin-left: auto;
}
.panel-group {
width:430px;
z-index: 100;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
}
.panel-heading {
width: 430px;
}
.panel-title {
height:18px
}
.panel-title a {
float:right;
text-decoration:none;
padding: 10px 430px;
margin: -10px -430px;
}
.panel-body {
height:830px;
transform: rotate(90deg);
transform-origin: 188px 241px 0;
}
.panel-group img {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
}
.panel-group p {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
}
.panel-group .panel img {
margin-left:400px;
position: absolute;
}<div class="container">
<div class="row">
<div class="content">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Accordion 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p><h1>Title</h1><br>A paragraph of text about something pertinant to the site which people could read should the feel the need to read about it. They could skip it as well but this keeps the initial view a good deal less text heavy, see?<br>- Some Source</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>In this fiddle I want to insert the scrollbar inside the body-content. Please help me how can I do this.
Share Improve this question asked Jul 30, 2015 at 10:40 kali dasskali dass 371 gold badge1 silver badge11 bronze badges2 Answers
Reset to default 2For a simple horizontal/vertical scroll bar inside panel-body you can add two extra div inside panel-body like
<div class="panel-body">
<div class="t1">
<div class="t2"> your content goes here.....</div>
</div>
and alter some css like
.panel-body {
height:830px; width: 600px;
overflow: hidden;
transform: rotate(90deg);
transform-origin: 188px 241px 0;
}
.t1 {
max-height: 390px;
overflow: scroll;
}
.t2 {
height: 320px;
width: 720px;
}
you'll get a simple window scroll further you can also use plugin like MalihuFancyscroll for fancy looking scrollbars.
Here is the JSFiddle / FullScreen JSFiddle of your solution.
I used CSS rule overflow:hidden to add the proper scrollbar to the <div id="collapseOne> that wrapps the <div class="panel-body">.
I first checked for the HTML console to check which class was added to the <div id="collapseOne">. So I identifyied 2 class that was toggling for the open and close state of your accordion :
panel-collapse collapse(state : closed)panel-collapse collapse in(state : opened)
I added to the .collapse.in class the rule overflow : auto which let the browser add x and y scrollbars if the content go out the initial width value.
I hope you understood the usage of this rule and this solution fits your need.