3

Estou tentando clonar um objeto usando Jquery, porém a largura do campo clonado não fica de acordo com o esperado.

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();
        }
    }

Deixei também o exemplo no link:https://jsfiddle.net/8bs8onLc/

2

2 Respostas 2

1

Se você quer que a largura do campo clonado seja a mesma do campo original, uma maneira de fazer isso é incluir um style no código que adiciona o campo.

Substitua esta linha:

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

Por esta:

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

O $(".select2-selection").outerWidth() pega a largura total do campo original pela classe .select2-selection.

Veja no seu JSFiddle atualizado.

2
  • A questão ali e a aplicação do plugin ao clonar.
    – Bruno Kaue
    Commented 17/01/2018 às 13:21
  • @BrunoKaue Olá Bruno! Não entendi muito bem
    – Sam
    Commented 17/01/2018 às 13:25
0

Como você está colocando linhas em uma tabela sem tamanho definido, na hora do .append() o elemento não vai respeitar o tamanho da linha por causa da classe form-control do Bootstrap que implica em width:100%.

Tente colocar apenas uma definição de classe no CSS:

.bselect{
   width: 583px;
}

IMPORTANTE

Perceba tambem que seus novos selects não são instanciados na biblioteca select2(), coloquei seu código numa função para instanciar os novos elementos adicionados tambem:

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

Sendo chamada na hora do Load do Documento:

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

Simplesmente chamando ela também quando for adicionar um novo Elemento

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .