Jquery Sortable and Bootstrap wrapping causing problems with layout

Question

I'm having some issues with Jquery Sortables, Bootstrap and how it handles a growing list insides some divs. My fiddle is here jsfiddle.

<section class="container">

<div>

  <table class="dataview table table-bordered table-striped table-condensed">
    <tr class="row">
      <td>
        <label class="col-md-12" style="display: block;">03/12/2018</label>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 1</label>
          <ul id="sortable1" class="connectedSortable">
            <li><span>Item1</span></li>
            <li><span>Item2</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 2</label>
          <ul id="sortable2" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 3</label>
          <ul id="sortable3" class="connectedSortable">
            <li><span>Item3</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 4</label>
          <ul id="sortable4" class="connectedSortable">
            <li><span>Item4</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c1</label>
          <ul id="sortable5" class="connectedSortable">
            <li><span>Item5</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c2</label>
          <ul id="sortable6" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c3</label>
          <ul id="sortable7" class="connectedSortable">
          </ul>
        </div>

        <div class="col-md-1 sortable">
          <label>c4</label>
          <ul id="sortable8" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c5</label>
          <ul id="sortable9" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c6</label>
          <ul id="sortable10" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c7</label>
          <ul id="sortable11" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c8</label>
          <ul id="sortable12" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c9</label>
          <ul id="sortable13" class="connectedSortable">
          </ul>
        </div>
      </td>
    </tr>
  </table>
</div>

$("#sortable1, #sortable2, #sortable3, #sortable4, #sortable5, #sortable6, #sortable7, #sortable8, #sortable9, #sortable10, #sortable11, #sortable12, #sortable13").sortable({connectWith: ".connectedSortable"}).disableSelection();

When you look at the fiddle you'll see Mobile Employee 1's Div is expanding due to the multiple list items. This is pushing the c2 Div when I would like c2 to stay below Mobile Employee 1. Thoughts?

edit: Unfortunately I missed a big detail as I was trying to get this posted before I had to leave. The number of cells (Mobile Employee1,2,3, c2-9) can differ. It can be 0-n of them so that's why I didn't just split them up into their own divs.

This question was answered correctly when originally posted. However, after noticing that information was missed in the initial question I made an edit and this has not received any new answers since that edit. I ended up moving away from this as I do not think it is possible to fix under the conditions. — Chris
– Chris, Commented Mar 14, 2018 at 23:20

Piotr Mirosz · Accepted Answer · 2018-03-13 01:04:47Z

Html code

<div>

  <table class="dataview table table-bordered table-striped table-condensed">
    <tr class="row">
      <td>
        <label class="col-md-12" style="display: block;">03/12/2018</label>

      <div id="wrap">

      <div class="col-md-1 sortable">
          <label>Mobile Employee 1</label>
          <ul id="sortable1" class="connectedSortable">
            <li><span>Item1</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 2</label>
          <ul id="sortable2" class="connectedSortable">
            <li><span>Item2</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 3</label>
          <ul id="sortable3" class="connectedSortable">
            <li><span>Item3</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 4</label>
          <ul id="sortable4" class="connectedSortable">
            <li><span>Item4</span></li>
          </ul>
          </div>
          </div>
        <div id="wrap"> <div class="col-md-1 sortable">



          <label>c1</label>
          <ul id="sortable5" class="connectedSortable">
            <li><span>Item5</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c2</label>
          <ul id="sortable6" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c3</label>
          <ul id="sortable7" class="connectedSortable">
          </ul>
        </div>

        <div class="col-md-1 sortable">
          <label>c4</label>
          <ul id="sortable8" class="connectedSortable">
          </ul>
          </div>]</div>
        <div id='wrap'> <div class="col-md-1 sortable">



          <label>c5</label>
          <ul id="sortable9" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c6</label>
          <ul id="sortable10" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c7</label>
          <ul id="sortable11" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c8</label>
          <ul id="sortable12" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c9</label>
          <ul id="sortable13" class="connectedSortable">
          </ul>
        </div>
        </div>
      </td>
    </tr>
  </table>
</div>

Css code:

div{
  overflow: auto;

  }

  #wrap {
    width:100%;
  padding: 10px;

  }


span {

  margin: 0px 5px 5px;
  border: 1px solid rgb(0, 0, 0);
  border-image: none;
  width: 120px;
  font-size: 1.2em;
}

ul {
  padding: 5px 0px 0px;
  border: 1px solid rgb(238, 238, 238);
  border-image: none;
  width: 120px;
  margin-right: 10px;
  list-style-type: none;
}

.sortable {
  border: 1px solid rgb(0, 0, 0);
  border-image: none;
  min-height: 70px;
  float: left;
}

I hope i helped.

Yes! That looks like it fixes my problem. I just need to see what your changes are compared to my code.
Well I see what you did and I missed mentioning that the number of cells (Mobile Emp1,2,3, c2-9) are not set amounts. My fault as I was rushing out the door when I posted the question. There could be 0-n of them.

Collectives™ on Stack Overflow

Jquery Sortable and Bootstrap wrapping causing problems with layout

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related