Having jQuery UI Selectable both as grid and a list in a table

Update:

To support IE 11, you can update your CSS to include -ms-grid specific styles and it should work but again you might have to test it thoroughly:

$(function() {
  $("#selectable1").selectable();
  $("#selectable2").selectable();
});

body {
  margin: 0;
  padding: 0;
}

.header {
  background: yellow;
  -ms-grid-row: 1; /* for IE */
}

.footer {
  background: yellow;
  -ms-grid-row: 3; /* for IE */
}

div.table {
  display: grid;
  width: 100vw;
  height: 100vh;
  
  /* for IE */
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 20px 1fr 20px;
}

div.container {
  display: grid;
  grid-template-columns: auto 140px;
  grid-column-gap: 10px;
  overflow: hidden;
  
  /* for IE */
  display: -ms-grid;
  -ms-grid-columns: 1fr 140px;
  -ms-grid-rows: 1fr;
  -ms-grid-row: 2;
}

div.container div {
  overflow: auto;
}

div.container div.column1 {
    -ms-grid-column: 1; /* for IE */
}

div.container div.column2 {
    -ms-grid-column: 2; /* for IE */
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#selectable1 li,
#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="table">
  <div class="header">Header1</div>
  <div class="container">
    <div class="column1">
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </div>
    <div class="column2">
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </div>
  </div>
  <div class="footer">Footer1</div>
</div>

You should be able to use CSS Grid to achieve what you want if you are willing to replace table with them:

$(function() {
  $("#selectable1").selectable();
  $("#selectable2").selectable();
});

body {
  margin: 0;
  padding: 0;
}

.header,
.footer {
  background: yellow;
}

div.table {
  display: grid;
  width: 100vw;
  height: 100vh;
}

div.container {
  display: grid;
  grid-template-columns: auto 140px;
  grid-column-gap: 10px;
  overflow: auto;
}

div.container div {
  overflow-y: auto;
  height: 100%;
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#selectable1 li,
#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="table">
  <div class="header">Header1</div>
  <div class="container">
    <div>
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </div>
    <div>
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </div>
  </div>
  <div class="footer">Footer1</div>
</div>

Consider the following: https://jsfiddle.net/Twisty/uro3b2ps/17/

HTML

<div class="page">
  <div class="header">Header1</div>
  <div class="content">
    <ol id="selectable1">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
    </ol>
    <ol id="selectable2">
      <li class="ui-state-default">A</li>
      <li class="ui-state-default">B</li>
      <li class="ui-state-default">C</li>
      <li class="ui-state-default">D</li>
      <li class="ui-state-default">E</li>
      <li class="ui-state-default">F</li>
      <li class="ui-state-default">G</li>
      <li class="ui-state-default">H</li>
      <li class="ui-state-default">I</li>
      <li class="ui-state-default">J</li>
    </ol>
  </div>
  <div class="footer">
    <td colspan=2 bgcolor="yellow">Footer1</td>
  </div>
</div>

CSS

.header,
.footer {
  width: 100%;
  background-color: yellow;
}

.content {
  height: 100vh;
  overflow: hidden;
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  width: calc(100% - 150px);
  float: left;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 100px;
  height: 100vh;
  overflow-y: scroll;
}

#selectable1 li,
#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

There are lots of other ways to do this. inline-block is another way of the many ways to block something but allow space after it for other elements. float is also another way.

Basically, you have to set a height for the list element and this will create a scrollbar when there is overflow.

Updated

https://jsfiddle.net/Twisty/uro3b2ps/21/

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 110px;
  height: 200px;
  overflow-y: scroll;
}

Update 2

https://jsfiddle.net/Twisty/uro3b2ps/25/

This uses jQuery to dynamically set the height based on the Window.

Having jQuery UI Selectable both as grid and a list in a table

Related

Recent Posts