CODEWITHSUNDEEP
javascripthtmlcssfirefox
AKHIL K
AKHIL K

Reputation: 94

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

I have the 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 another div with a fixed height.These "g" elements are added dynamically using JavaScript. So I expect a scroll bar when the no of "g" elements is increased

In IE11 I could able to see the scroll bar when the no of "g" elements are high. But for the same no of elements I was not able to see scroll bar in Firefox and in chrome anyone please tell me what is gone wrong here
here is a sample fiddle

Upvotes: 0

Views: 1470

Answers (1)

Germano Plebani
Germano Plebani

Reputation: 3625

I'm not an SVG expert, i never used it, but seems SVG doesn't change height. If you set height to the SVG it works: http://jsfiddle.net/u5ymhmht/7/

The practical solution in your js when you add a line, add height of the line to SVG.

p.s. Sorry for the 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>

Upvotes: 1

Related Questions