Question

Hi all I am working on html and javascript here is my code

<div class = "outer">
 <div class = "inner1 width="234" height="400" style="float: left">
   <svg width="100" height="400" style="float: left;">
      // some thing
   </svg>
 </div>
 <div class = "inner2" width="234" height="400" style="float: left overflow : scroll">
   <svg width="200" height="400" style="float: left;">
      <g class="c1" transform="translate(0,20)">
         <g>
          <text class="c1_name"></text>
          <text class="c1_value"></text>
         </g>

         <g>
          <text class="c2_name"></text>
          <text class="c2_vaue"></text>
         </g>
         <g>
          <text class="c3_name"></text>
          <text class="c3_value"></text>
         </g> 
                    .
                    .
                    . 
         // g added dynamically below the previous one

      </g>
   </svg>
 </div>
</div>

Here I want to make my div inner2 scrollable so that when a new g is added and the size of div become small to contain all g it become scrollable.
I have scroll bar appearing but they are disabled also when my new element come its add but I can not see it.can any one kindly guide me where I am wrong and how to correct this

By the way i am positioning my using transform attribute

Thanks

Answer 1

You need to use overflow:auto; if you want to show scrollbar only if it needs.