javascript - How to add scrollbar inside container in accordion? -

-

i using accordion. here, accordion functionality working. want insert vertical, , horizontal scrollbar in body content. how add scroll bar inside of panel-body content. have included fiddle , 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 {      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 pertinant site people read should feel need read it. skip keeps initial view deal less text heavy, see?<br>- source</p>                          </div>                      </div>                  </div>                                </div>          </div>      </div>  </div>

in fiddle want insert scrollbar inside body-content. please me how can this.

for simple horizontal/vertical scroll bar inside panel-body can add 2 div inside panel-body like

<div class="panel-body">    <div class="t1">          <div class="t2"> content goes here.....</div>   </div>

and alter 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 simple window scroll further can use plugin malihufancyscroll fancy looking scrollbars.


Comments

Post a Comment

Popular posts from this blog

qt - Using float or double for own QML classes -

-
i've created components , helper methods using c++ , qt used in qml gui. of methods calculate gui elements (size, transformations, scene graph items creation). target arm 32 bit using opengl / eglfs render output. opengl using float , qml using real (defined double ). what should use in c++ do not lose precision? if use qreal ( double ) shouldn't lose precision. if git grep float in qtbase.git , can find out bit more: dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0-* important behavior changes * dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0- dist/changes-5.2.0- - qt compiled qreal typedef'ed double on dist/changes-5.2.0: platforms. qreal float on arm chipsets before. guarantees more dist/changes-5.2.0- consistent behavior between platforms qt supports, binary dist/chan...
Read more

Create Outlook appointment via C# .Net -

-
i need create outlook appointment using microsoft.office.interop.outlook , while can work locally on own workstation , works if run web application via server's browser, not work when connect server externally. hence, think might permission issue. i changed application pool identity " localsystem " don't access denied error. unfortunately, doesn't work. the app behaves if appointment created, appointment doesn't appear in outlook. here include file on top of aspx.cs page using outlook = microsoft.office.interop.outlook; here code using pop appointment. outlook.application apptapp = new outlook.application(); outlook.appointmentitem appt = apptapp.createitem(outlook.olitemtype.olappointmentitem) outlook.appointmentitem; appt.subject = txtfirstname.text + " " + txtlastname.text; appt.body = txtcomment.text; appt.alldayevent = false; appt.start = datetime.parse(txtreminderdate.text + " 8:00 am"); appt.end = datetime.p...
Read more

ios - Swift Array Resetting Itself -

-
i have 2 arrays: pointhistory , datehistory . have nstimer , , when timer runs out, action called. in action appending int pointhistory , , current date string datehistory . here timer action: func timeraction() { let steppervalue = int(stepper.value) employee.numberofpoints = steppervalue networking.saveemployee(employee, completion: { (error) -> void in if error != nil { let alert = uialertcontroller(title: "error", message: "there error updating \(self.employee.name)'s points", preferredstyle: .alert) let alertaction = uialertaction(title: "ok", style: .cancel, handler: nil) alert.addaction(alertaction) self.presentviewcontroller(alert, animated: true, completion: nil) } }) var dateformatter = nsdateformatter() dateformatter.dateformat = "mm-dd-yyyy" dateformatter.timezone = nstimezone.localtimezone() var date = nsdate() var ...
Read more