How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

Question

I've successfully created 3 view boxes using an html table. Each view can be hidden. Now I'd like to have each views width and height to be resizable, pretty much exactly like how its done in JSFiddle where each code editing box can be resized. I found a jQuery widget but it only allow for the columns to be resized and not the boxes. I also found this but it was not implemented with a table http://www.bootply.com/RwnUXIcLap . Here's what I have so far https://jsfiddle.net/3waurzbf/ .

var tds = document.getElementsByTagName('td');
var inputs = document.getElementsByTagName('input');
var rows = document.getElementsByTagName('tr');

console.log(inputs);
console.log(tds);
var changeView = function () {

  for (var i = 0; i < inputs.length; i++) {
    if (!inputs[i].checked) {
      if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
    } else {
      if(tds[i].style.display === 'none') tds[i].style.display = '';
    }
  }

  if (!inputs[0].checked && !inputs[1].checked) rows[0].style.display = 'none';
  else rows[0].style.display = '';

  if (!inputs[2].checked) rows[1].style.display = 'none';
  else rows[1].style.display = '';

};

changeView();


//$("#views-table").colResizable({liveDrag:true});

html {
  height: 100%;
}

body {
  height: 100%;
}

table {
  width: 100%;
  height: 90%;
}

table td {
  text-align: center;
  border: 1px solid black;
}

#views-container {
  height: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>View 1</td>

    <td>View 2</td>
  </tr>

  <tr>
    <td colspan="2">View 3</td>
  </tr>
</table>
<div id="views-container">
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 1</label>
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 2</label>
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 3</label>
</div>

You may look into this stackoverflow.com/questions/12403095/resizing-div-panel — Thangaraja
– Thangaraja, Commented Jan 26, 2016 at 17:06
Using jQuery UI might help with this. It has a resizable feature here — UndoingTech
– UndoingTech, Commented Jan 26, 2016 at 17:30

digglemister · Accepted Answer · 2016-01-26 19:16:31Z

4

You can use jQuery UI .resizable(), although it's a bit tricky with table display and requires a little extra code.

Check out this working fiddle: https://jsfiddle.net/18k3umpp/3/

I've added a couple ids to View 1 and View 2:

<tr>
    <td id="v1">View 1</td>

    <td id="v2">View 2</td>
</tr>

Then try this:

$(window).on("load resize", function() {

    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var v1Width = $("#v1").width()


    $("#v1").resizable({
        minWidth: 50,
        maxWidth: windowWidth - 80,
        maxHeight: windowHeight * (.83),
        handles: "e, s"
    }).on("resize", function() {

        if (v1Width == $("#v1").width()) {
            $("#v2").height(0)
        }
        v1Width = $("#v1").width()
    });

    $("#v2").resizable({
        maxHeight: windowHeight * (.83),
        handles: "s"
    }).on("resize", function() {
        $("#v1").height(0)
    });

});

Of course you can adjust the minWidth,maxWidth, and maxHeight options to whatever your needs are.

edited Jan 26, 2016 at 19:16

answered Jan 26, 2016 at 19:05

digglemister

1,4873 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

digglemister Over a year ago

@DanielKobe Is this what you're looking for?

Pardeep Jain Over a year ago

may i know what is the significance of handles here in the answer ?

digglemister Over a year ago

@PardeepJain The handles option is used to indicate which sides of the element can be grabbed for the purpose of resizing. "e" refers to east, and "s" refers to south, so the right and bottom edges of the element. api.jqueryui.com/resizable/#option-handles

Pardeep Jain Over a year ago

ohh okay thanku so much for information, but in any case mt resizable is not working, do you know why ?

Collectives™ on Stack Overflow

How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related