Shapeshift doesn't set positions when located inside bootstrap tab

Question

I'm using shapeshift for drag & drop options, and one of the containers is hided inside bootstrap tab. Shapeshift is initialized there, but doesn't set items to positions till first drag of item.

JSfiddle with this bug: https://jsfiddle.net/owm6wo0r/

As you can see inside JSFiddle when you click "Tab 2" all items are on one on another. When you try to drag them they set positions.

Here is documentation of plugin: https://github.com/McPants/jquery.shapeshift/wiki/2.0-api-documentation

I tried with event "ss-rearrange" on clicking the tab, but it didn't work... Any idea how to fix it?

HTML:

<div class="dragdrop">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<ul class="nav-tabs nav" role="tablist">
  <li class="active">
    <a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab">Tab 1</a>
  </li>
  <li>
    <a href="#tab2" data-toggle="tab" role="tab" aria-controls="tab2">Tab 2</a>
  </li>
 </ul>

<div class="tab-content">
  <div id="tab1" role="tabpanel" class="tab-pane active">
    <p> Nothing there </p>
  </div>
<div id="tab2" role="tabpanel" class="tab-pane">
    <div class="dragshared">
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
    </div>
  </div>
 </div>

JS:

$('.nav-tabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

$('.dragdrop').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
dragClone: false,
enableDrag: true,
enableCrossDrop: true
});

$('.dragshared').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
deleteClone: true,
dragClone: true,
enableCrossDrop: false
});

score 0 · Answer 1 · answered Aug 17 '15 at 12:34

My final solution is to set at the beggining bootstrap tabs on visibility: hidden/visible instead of display: block/none and only after shapeshift initialization switch again for display none/block since visibility didn't work as it should (desactivated tab was visible for a second).

I believe there is way to make it clever.

CSS

    .tab-content>.tab-pane {
      display: block;
      visibility: hidden;
      height: 0;
      width: 100%;
      .dragshared {
        height: 0!important;
      }
    }

    .tab-content>.active {
      height: auto;
      visibility: visible;
      .dragshared {
        height: auto;
      }
    }

    .tab-content.initialized>.tab-pane {
      display: none;
      visibility: visible;
    }

    .tab-content.initialized>.tab-pane.active {
      display: block;
    }

JS

(shapeshift initialization)
$('.tab-content').addClass('initialized');

Shapeshift doesn't set positions when located inside bootstrap tab

1 Answers1