Problems cloning a field using Jquery

Question

I am trying to clone an object using Jquery, but the width of the cloned field is not as expected.

HTML

<table class="table table-responsive" id="tableAulas">
                    <thead>
                        <tr>
                            <th>Disciplina</th>
                            <th>Professor</th>
                            <th>Carga Horária</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>

                            <td>
                                <select class="form-control bselect" name="professor[]">
                                    <option>Select</option>
                                </select>
                            </td>

                        </tr>

                    </tbody>
                </table>
                <p class="text-right">
                    <a href="javascript:void(0)" class="btn btn-sm btn-success" id="addRowAula"><i class="fa-plus"></i> Adicionar campo</a>
                    <a href="javascript:void(0)" class="btn btn-sm btn-danger" id="removeRowAula" style="display:none;" ><i class="fa-minus"></i> Remover último campo</a>
                </p>

JS

    $(".bselect").select2({allowClear: true}).on('select2-open', function()
    {$(this).data('select2').results.addClass('overflowhidden').perfectScrollbar();});

    $('#addRowAula').on('click', function(){

    console.log('add row');
    var html ='<tr> <td> <select class="form-control bselect" name=""> <option>Select</option> </select> </td></tr>';

    $("#tableAulas > tbody").append(html);
    showRowButton();
    });
        $('#removeRowAula').on('click', function(){
        $('#tableAulas tr:last').remove();
        showRowButton();
     });
    function showRowButton(){
        var rowCount = $('#tableAulas >tbody > tr').length;
        if(rowCount > 1){
            $('#removeRowAula').show();
        }else{
            $('#removeRowAula').hide();
        }
    }

I also left the example on the link:https://jsfiddle.net/8bs8onLc/

Answer 1

If you want the width of the cloned field to be the same as the original field, one way to do this is to include a style in the code that adds the field.

Replace this line:

var html ='<tr> <td> <select class="form-control bselect" name=""> <option>Select</option> </select> </td></tr>';

For this:

var html ='<tr> <td> <select style="width: '+$(".select2-selection").outerWidth()+'px;" class="form-control bselect" name=""> <option>Select</option> </select> </td></tr>';

The $(".select2-selection").outerWidth() takes the total width of the original field by class .select2-selection.

See in your Jsfiddle updated.

Answer 2

How are you placing rows in a table with no set size, at the time of .append() element will not respect line size because of class form-control of Bootstrap which implies width:100%.

Try just putting a class definition in CSS:

.bselect{
   width: 583px;
}

IMPORTANT

Also note that your new selects are not instantiated in the library select2(), I put your code in a function to instantiate the new elements added as well:

function InicializarSelect(){
    $(".bselect").select2({allowClear: true}).on('select2-open', function(){$(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();});
}

Being called at Document Load time:

$(function(){
    InicializarSelect();
})

Simply calling it as well when adding a new Element

Link: https://jsfiddle.net/8bs8onLc/4/