The question is published on by Tutorial Guruji team.
I have created a resizable split view you can drag the line between to increase and decrease the size of the left and right screens. the right screen consists of two canvases containing 2 images on them we can write on that canvas. The problem is that the body has a height of 100% but the canvas overlapping the <div class="container1"> and the HTML, body. HTML and body is not expanding with the canvas as shown in the below image:
Here is the image of the <div class="container1"> border consisting of right and left sides and a resizable line between them. I can not resize below the container line because the container is not expanding with the canvas.
HTML CODE:
<div class="container1">
<div class="container__left">
<form id="orderByPicFrm">
<div class="form-group">
<input
type="hidden"
class="form-control"
id="code"
aria-describedby="emailHelp"
placeholder="Code"
size="3"
disabled
/>
</div>
<div class="form-group">
<label for="itemName">Name</label>
<input
type="text"
class="form-control"
id="itemName"
placeholder="Name"
size="50"
/>
</div>
<div class="form-group">
<label for="qty">clear </label>
<button
type="submit"
class="btn btn-primary"
onclick="clearfield(event)"
>
clear
</button>
</div>
</form>
</div>
<div class="resizer" id="dragMe"></div>
<div class="container__right">
<div class="absolute">
<div id="navbar">
<button type="button" onclick="zoomin_canvas()">+</button>
<button type="button" onclick="zoomout_canvas()">-</button>
<button id="rotateRight" onclick="rotateRight()">Right</button>
<button id="rotateLeft" onclick="rotateLeft()">Left</button>
<button id="Button1" onclick="draw()">draw</button>
<label> Marking</label>
<label class="switch">
<input type="checkbox" checked onclick="doMarking()" id="mark" />
<span class="slider round"></span>
</label>
</div>
<div class="fix">
<img id="img1" src="img.JPG" style="display: none" />
<canvas
fileName="img.JPG"
id="canvas1"
rotate="0"
onclick="selectImg(event)"
onmousedown="mouseDown(event)"
onmouseup="mouseUp(event)"
onmousemove="mouseMove(event)"
>
Your browser does not support the HTML5 canvas tag.
</canvas>
<img id="img2" src="img2.jpeg" style="display: none" />
<canvas
fileName="img2.jpeg"
id="canvas2"
rotate="0"
onclick="selectImg(event)"
onmousedown="mouseDown(event)"
onmouseup="mouseUp(event)"
onmousemove="mouseMove(event)"
>
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
</div>
</div>
</div>
CSS CODE:
<style>
.container1 {
display: flex;
border: 1px solid #cbd5e0;
height: 100%;
width: 100%;
}
.container__left {
width: 50%;
display: flex;
flex-direction: column;
min-width: 18rem;
}
.resizer {
background-color: #cbd5e0;
cursor: ew-resize;
height: 100%;
width: 2px;
}
.container__right {
flex: 1;
display: flex;
justify-content: center;
}
body,
html {
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
I took the resizable code from this website :https://htmldom.dev/create-resizable-split-views/
Answer
Your elements are positioned absolutely even if the body has 100% width and height. Remove positioning and display the elements in flex.
#container {
display: flex;
width: 100%;
height: 100%;
}
#left_panel {
display: flex;
background-color: white;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
overflow: scroll;
}
.column {
display: flex;
flex-direction: column;
max-height: 70vh;
}