javascript - Accordion does not make page longer -


i using accordion this: enter image description here

the html looks like:

   <div id="cal-container">         <div id="cal-side">             <div class="accordion" id="accordion2">                 <div class="accordion-group">                     <div class="accordion-heading">                         <a class="accordion-toggle project-header" data-toggle="collapse" data-parent="#accordion2" href="#project-list">projects                         </a>                     </div>                     <div id="project-list" class="accordion-body collapse">                         <div class="accordion-inner">                             <div class="event-container project-container">                             </div>                          </div>                     </div>                 </div>                 <div class="accordion-group">                     <div class="accordion-heading">                         <a class="accordion-toggle task-header" data-toggle="collapse" data-parent="#accordion2" href="#task-list">tasks                         </a>                     </div>                     <div id="task-list" class="accordion-body collapse">                         <div class="accordion-inner">                             <div class="event-container task-container">                             </div>                         </div>                     </div>                 </div>                 <div class="accordion-group">                     <div class="accordion-heading">                         <a class="accordion-toggle case-header" data-toggle="collapse" data-parent="#accordion2" href="#case-list">cases                         </a>                     </div>                     <div id="case-list" class="accordion-body collapse">                         <div class="accordion-inner">                             <div class="event-container case-container">                             </div>                         </div>                     </div>                 </div>             </div>          </div>          <div id="cal">             <div id='calendar'>             </div>         </div>     </div> 

the css looks like:

      .calendar         {             margin:16px;             border-collapse:separate !important;                 -webkit-border-radius: 7px;             border-radius: 7px;             border-spacing:0;         }          .cal-container         {             margin-left:auto;             margin-right:auto;             display: table;             width:100%;         }      #cal-side     {         float:right;         height:100%;         width:200px;         margin:50px 5px 5px 5px;     }      #cal-container     {         width:100%;     }      .top-link     {         display:inline-block;     }      .accordion-inner     {         padding:2px 2px !important;     }  #cal{      overflow:hidden; } 

the problem when have many events, page not ebd @ bottom of content.

i suspect style causes is:

  #cal{          overflow:hidden;     } 

without it scroll bottom, calendar goes bottom too...

i need way image, bottom of page should @ bottom. events should not penetrate it.

i want scrollbar items if bigger parent div / cal-side

thanks

enter image description here

try adding height: auto containing element.


Comments

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -