Body not expading with the content inside. Images and canvas overlapping the body Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Body not expading with the content inside. Images and canvas overlapping the body without wasting too much if your time.

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: enter image description here

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. enter image description here 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;
} 
We are here to answer your question about Body not expading with the content inside. Images and canvas overlapping the body - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji