javascript - css overflow-y:auto not working in firefox and chrome -


i have following code

<div id="somediv" style="float: right; margin-right: -350px; position: relative; overflow-x: hidden; overflow-y: auto;"> <svg class="somesvgclass" width="105"> <g>..</g> <g>..</g> ... </svg> </div> 

this div contains inside div fixed height.these "g" elements added dynamically using javascript. expect scroll bar when no of "g" elements increased

in ie11 able see scroll bar when no of "g" elements high. same no of elements not able see scroll bar in firefox , in chrome please tell me gone wrong here
here sample fiddle

i'm not svg expert, never used it, seems svg doesn't change height. if set height svg works: http://jsfiddle.net/u5ymhmht/7/

the practical solution in js when add line, add height of line svg.

p.s. sorry previous misunderstanding.

svg {      height:500px;  }    #someid {      height: 150px;      overflow-x: hidden;      overflow-y auto;  }
<div id="someid">      <svg  width="105">      <g transform="translate(10,5)">              <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,20)">              <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,35)">          <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,50)">              <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,65)">          <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,80)">              <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>                    <g transform="translate(10,95)">          <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,110)">              <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>                    <g transform="translate(10,125)">          <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,140)">              <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>                    <g transform="translate(10,155)">          <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,170)">              <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,185)">          <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>          <g transform="translate(10,200)">              <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>          </g>      </svg>  </div>


Comments

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - Bypass Geo Redirect for specific directories -

php - .htaccess mod_rewrite for dynamic url which has domain names -