OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Making a dragbar to resize divs inside CSS grids

  • Thread starter Thread starter Aquazi
  • Start date Start date
A

Aquazi

Guest
I have 2 boxes and a vertical div line in one unique container div (code and fiddle below).

I'm using CSS grids to position my elements inside the container

What I'd like to accomplish is to use the vertical line to resize horizontally the two boxes based on the position of the vertical line.

I apologize if the question is noobish, I am new to web development, only used Python before, already tried to google and stackoverflow search but all solutions seem overly complicated and generally require additional libraries, I was looking for something simpler and JS only.

HTML:

Code:
<div class="wrapper">
  <div class="box a">A</div>
  <div class="handler"></div>
  <div class="box b">B</div>
</div>

CSS:

Code:
body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 8px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  resize: both;
}

.handler{
    width: 3px;
    height: 100%;
    padding: 0px 0;
    top: 0;
    background: red;
    draggable: true;
}

https://jsfiddle.net/gv8Lwckh/6/

<p>I have 2 boxes and a vertical div line in one unique container div (code and fiddle below).</p>

<p>I'm using CSS grids to position my elements inside the container</p>

<p>What I'd like to accomplish is to use the vertical line to resize horizontally the two boxes based on the position of the vertical line.</p>

<p>I apologize if the question is noobish, I am new to web development, only used Python before, already tried to google and stackoverflow search but all solutions seem overly complicated and generally require additional libraries, I was looking for something simpler and JS only.</p>

<p>HTML:</p>

<pre><code><div class="wrapper">
<div class="box a">A</div>
<div class="handler"></div>
<div class="box b">B</div>
</div>
</code></pre>

<p>CSS:</p>

<pre><code>body {
margin: 40px;
}

.wrapper {
display: grid;
grid-template-columns: 200px 8px 200px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}

.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
resize: both;
}

.handler{
width: 3px;
height: 100%;
padding: 0px 0;
top: 0;
background: red;
draggable: true;
}
</code></pre>

<p><a href="https://jsfiddle.net/gv8Lwckh/6/" rel="noreferrer">https://jsfiddle.net/gv8Lwckh/6/</a></p>
 

Latest posts

Top