when I add an svg dynamically in the height of my div overflows, how can I prevent it?

user_5357758 0
Viewed 33

I have a grid like this image

enter image description here

everything up to here is fine. I use d3.js to add a svg dynamically ,I want to place it inside .container2 inside #mysvg (I have put a red border so you know where I want to put my svg). But when this happens the .container2 gets bigger and I want to avoid this, the strange thing is that the svg has the exact size in that available space.

enter image description here

how can i correct it?

let width = document.getElementById('mysvg').offsetWidth;
let height = document.getElementById('mysvg').offsetHeight;
let createSvg=d3.select("#mysvg").append("svg").attr("width", width).attr("height", height)
html,body{
 margin:0px;
 padding:0px;
 height:100%;
 width:100%;
 border:1px solid red;
}

*{
  box-sizing: border-box;  
}

svg{
 border:1px solid green;
}

h6{
  margin:0px;
  padding:0px;
}

.container1,.container2,.container3{
  border:1px solid black;
}

.container_flexbox{
  height:100%;
  display:flex;
  flex-direction:column;
}

.container_graph{
  flex-grow:1;
}

#mysvg{
 border:1px solid red;
 height:100%;
}

.container_grid{
  display: grid !important;
  grid-template-areas:
    "container1 container2"
    "container1 container3";
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  background-color: white;
  padding: 10px;
  height:100%;
}

.container1 {
  grid-area: container1;
}

.container2 {
  grid-area: container2;
}

.container3 {
  grid-area: container3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container_grid">
    <div class="container1">container 1</div>
    <div class="container2">
        <div class="container_flexbox">
            <div>
                <h6>title of container 2 </h6>
            </div>
            <div class="container_graph">
                <div id="mysvg">
                </div>
            </div>
        </div>
    </div>
    <div class="container3">container 3</div>
</div>

css-grid css
1 Answers

Simply define an explicit height for you rows (like you did for columns) to avoid the auto sizing you are getting:

let width = document.getElementById('mysvg').offsetWidth;
let height = document.getElementById('mysvg').offsetHeight;
let createSvg=d3.select("#mysvg").append("svg").attr("width", width).attr("height", height)
html,body{
 margin:0px;
 padding:0px;
 height:100%;
 width:100%;
 border:1px solid red;
}

*{
  box-sizing: border-box;  
}

svg{
 border:1px solid green;
}

h6{
  margin:0px;
  padding:0px;
}

.container1,.container2,.container3{
  border:1px solid black;
}

.container_flexbox{
  height:100%;
  display:flex;
  flex-direction:column;
}

.container_graph{
  flex-grow:1;
}

#mysvg{
 border:1px solid red;
 height:100%;
}

.container_grid{
  display: grid !important;
  grid-template-areas:
    "container1 container2"
    "container1 container3";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
  background-color: white;
  padding: 10px;
  height:100%;
}

.container1 {
  grid-area: container1;
}

.container2 {
  grid-area: container2;
}

.container3 {
  grid-area: container3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container_grid">
    <div class="container1">container 1</div>
    <div class="container2">
        <div class="container_flexbox">
            <div>
                <h6>title of container 2 </h6>
            </div>
            <div class="container_graph">
                <div id="mysvg">
                </div>
            </div>
        </div>
    </div>
    <div class="container3">container 3</div>
</div>

user_86203330
Related