Why is the textarea in a d3 group changing position when new line is added?

18 views
Skip to first unread message

Oliver P

unread,
Apr 14, 2017, 1:02:29 PM4/14/17
to d3-js

so my problem, I have added a textarea to a foreignObject and this foreignObject is part of a d3 group and when you add new line to the textarea it changes the position. How can I fix that? Here you can see what I'm talking about (hit 2 or 3 times enter) https://jsfiddle.net/jcbujyyg/1/

same code:

var svg = d3.select("body").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 600")
.attr("width", "100%")
.attr("height", "100%")
.attr("style", "outline: thin solid black;")
.style("background-color", "#f4f3f1");


var group = svg.append('g')
    .datum({x: 0, y: 0});

group.append("rect")
    .data([{x: 200, y: 200, width: 400, height: 200}])
    .attr("id", "base")
    .attr("x", function (d) {return d.x;})
    .attr('y', function (d) {return d.y;})
    .attr('width', function (d) {return d.width;})
    .attr('height', function (d) {return d.height;})
    .attr("fill", "skyblue");

var inp = group.append("foreignObject")
            .attr('x', 200)
    .attr( 'y', 200)
    .append("xhtml:body")
    .attr('xmlns','http://www.w3.org/1999/xhtml')
    .append('textarea')
    .style("font-size" , "20px")

Before enter image description here

After enter image description here

Oliver P

unread,
Apr 14, 2017, 4:32:26 PM4/14/17
to d3-js
So if I'm setting ".style("overflow", "hidden")" then it doesn't happen. Very strange.
Reply all
Reply to author
Forward
0 new messages