Wrong rendering inside Bootstrap Tab and problem in sortable

Hi! I’m having some problems. The use case is:

I have a tab-bar and in one of the tabs is the formBuild div. like bellow:

        <div class="tab-pane" id="tab_4">
            <div id="build-wrap"></div>
        </div>

I’m using this code to initialize the builder:

<script>
    var fbTemplate = document.getElementById('build-wrap');
    var options = {
        disableFields: [
            'autocomplete',
            'file',
            'date',
            'button',
            'header',
            'paragraph',
            'number'

        ],
        controlPosition: 'left'
    };
    $(fbTemplate).formBuilder(options);
</script>

But, when the builder is rendered, this is the output: And, when I add something to it, the render is all broken: ![screen shot 2017-04-09 at 08 13 17] (https://cloud.githubusercontent.com/assets/312820/24835241/72f88ef4-1cfc-11e7-8e15-444a0ee9b134.png)

And I got this in Chrome Console:

Uncaught TypeError: $(...).sortable is not a function
    at HTMLUListElement._helpers.stopMoving (http://[DOMAIN]]/plugins/formBuilder/form-builder.js:599:20)
    at t.(anonymous function).(anonymous function)._trigger (http://[DOMAIN]]/js/jquery-ui.min.js:6:10825)
    at t.(anonymous function).(anonymous function)._trigger (http://[DOMAIN]]/js/jquery-ui.min.js:13:2081)
    at t.(anonymous function).(anonymous function)._trigger (http://[DOMAIN]]/js/jquery-ui.min.js:6:4499)
    at t.(anonymous function).(anonymous function)._clear (http://[DOMAIN]]/js/jquery-ui.min.js:13:1945)
    at t.(anonymous function).(anonymous function)._clear (http://[DOMAIN]]/js/jquery-ui.min.js:6:4499)
    at HTMLLIElement.<anonymous> (http://[DOMAIN]]/js/jquery-ui.min.js:12:16724)
    at HTMLLIElement.d.complete (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js:3:27996)
    at i (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js:2:27151)
    at Object.fireWith [as resolveWith] (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js:2:27914)

I’ve checked that I added the jquery-ui sortable, and everything is ok.

Can you give me some light? Or is this really a bug?

Thank you!

[tdsat]

There is a conflict with the bootstrap.css. Specifically because the panel is not active, so it has no height. That’s why when the form-builder tries to render it, it gives it a min-height:0px (It probably happens here )

There are a couple solutions.

1. Set a panel as active (like this )

2. Use Bootstap’s Tab Events like here

There are probably other ways too. Anyway hope it helps.

[paulohenriquesg]

@tdsat Sure! the link is: https://jsfiddle.net/7j0u8rnu/1/