responsive fix input-group with Select2 and other form-control element or input-group-btn

Question

I'm trying to finish the design, for a file upload system: the System has an Initial Select2; then it is concatenated with a search button (to search for the file); then we have an input text where I show the file name; after this I need 3 buttons: one preview, another that allows me to add more lines and another that allows me to remove them.

but I can not make it look like col-sm-12 as in col-sm-6

 $(".select2").select2({ theme: "bootstrap", placeholder: "Buscar y Selecionar", allowClear: true, }); 

 .btn-file { overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100px; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; background: red; cursor: inherit; display: block; } .btn-file input[readonly] { background-color: white !important; cursor: text !important; } .obj-file { width: 98% !important; height: 100% !important; min-height: calc(100vh - 200px) !important; overflow: auto !important; } .text-file { float: right !important; width: 60% !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.9/select2-bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> <div class="form-group"> <div class="col-sm-6"> <div class="input-group select2-bootstrap-append"> <div class="input-group-btn"> <select class="form-control select2"> <option>Selec.</option> <option>Prueba 2 max with</option> <option>Prueba 3</option> <option>Prueba 4</option> <option>Prueba 5</option> </select> <span class="btn btn-primary btn-file">Buscar <i class="fas fa-file-alt"></i><input id="i_file_1" type="file" name="i_file_1" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required></span> </div> <input type="text" class="form-control text-file" name="text_file_1" readonly> <div class="input-group-btn"> <span class="btn btn-info btn-disabled view-doc btn-view " data-toggle="modal" data-target="#modal-info-i_file_1" disabled>Vista Previa</span> <span class="btn btn-info"><i class="fas fa-plus-square"></i></span> <span class="btn btn-info"><i class="fas fa-minus-square"></i></span> </div> </div> </div> </div> 

Check the input text read only on mid; this has 80% with but i need it fill in all instance the space in line on mid.

Answer 1

i have find the way to solve it

IN BS 3.X:

 $(".select2").select2({ theme: "bootstrap", placeholder: "Buscar y Selecionar", width: 'auto', dropdownAutoWidth: true, allowClear: true, }); 

 .btn-file { overflow: hidden; border-radius: 0 !important; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100px; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; background: red; cursor: inherit; display: block; } .btn-file input[readonly] { background-color: white !important; cursor: text !important; } .text-file { float: right !important; width: 100% !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.9/select2-bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> <div class="row"> <div class="col-sm-12 form-horizontal"> <div class="form-group"> <div class="col-sm-12"> <div class="input-group select2-bootstrap-append"> <div class="input-group-btn"> <select class="form-control select2"> <option>Selec.</option> <option>Prueba 2 max with</option> <option>Prueba 3</option> <option>Prueba 4</option> <option>Prueba 5</option> </select> </div> <div class="input-group-btn"> <span class="btn btn-primary btn-file">Buscar <i class="fas fa-file-alt"></i><input id="i_file_1" type="file" name="i_file_1" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required></span> </div> <input type="text" class="form-control text-file" name="text_file_1" readonly> <div class="input-group-btn"> <span class="btn btn-info btn-disabled view-doc btn-view " data-toggle="modal" data-target="#modal-info-i_file_1" disabled>Vista Previa</span> <span class="btn btn-info"><i class="fas fa-plus-square"></i></span> <span class="btn btn-info"><i class="fas fa-minus-square"></i></span> </div> </div> </div> </div> </div> </div> 

IN BS 4.X: Custom script to init select2 dynamically

  $('select').each(function () { $(this).off('change'); $(this).select2({ theme: 'bootstrap4', placeholder: "Buscar y Selecionar", width: 'auto', dropdownAutoWidth: true, }); }); 

 .select2-container--bootstrap4 .select2-selection--single{height:calc(2.25rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#757575;line-height:2.25rem}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;top:50%;right:3px;width:20px}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{top:60%;border-color:#343a40 transparent transparent;border-style:solid;border-width:5px 4px 0;width:0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{line-height:2.25rem}.select2-search--dropdown .select2-search__field{border:1px solid #ced4da;border-radius:.25rem}.select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(2.25rem + 2px)!important;height:calc(2.25rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#343a40;border:1px solid #bdc6d0;border-radius:.2rem;padding:0;padding-right:5px;cursor:pointer;float:left;margin-top:.3em;margin-right:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#bdc6d0;font-weight:700;margin-left:3px;margin-right:1px;padding-right:3px;padding-left:3px;float:left}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container :focus{outline:0}.select2-container--bootstrap4 .select2-selection{border:1px solid #ced4da;border-radius:.25rem;width:100%}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#17a2b8;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,.25);box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}select.is-invalid~.select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-valid~.select2-container--bootstrap4 .select2-selection{border-color:#28a745}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true]{background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true]{background-color:#007bff;color:#f8f9fa}.select2-container--bootstrap4 .select2-results__option[role=group]{padding:0}.select2-container--bootstrap4 .select2-results__group{padding:6px;display:list-item;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{width:1.2em;height:1.2em;line-height:1.15em;padding-left:.3em;margin-top:.5em;border-radius:100%;background-color:#6c757d;color:#f8f9fa;float:right;margin-right:.3em}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#343a40}/*fileupload*/ .select-file{ display: none !important; } .btn-file input[readonly] { background-color: white !important; cursor: text !important; } .custom-file-label { width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .custom-file-label{ overflow: hidden !important; text-overflow: ellipsis !important; } .obj-file { width: 98% !important; height: 100% !important; min-height: calc(95vh - 200px) !important; overflow: auto !important; } /*Fix Select2 Container*/ .select2-bootstrap4-prepend > .select2-container > .selection > .select2-selection--single { border-radius: .25rem 0 0 .25rem !important; } .select2-bootstrap4-append > .select2-container > .selection > .select2-selection--single { border-radius: 0 .25rem .25rem 0 !important; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> <div class="row"> <div class="col-lg-6"> <div class="form-group row file-plugin"> <div class="col-lg-12"> <div class="input-group select2-bootstrap4-prepend"> <select class="custom-select select-file" name="s_file_1"> <option>Selec.</option> <option>Prueba 2 max with</option> <option>Prueba 3</option> <option>Prueba 4</option> <option>Prueba 5</option> </select> <div class="custom-file btn-file"> <input type="file" class="custom-file-input" id="i_file_1" name="i_file[]" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"> <label class="custom-file-label">Sin Archivo</label> </div> <div class="input-group-append"> <button type="button" class="btn btn-info btn-disabled view-doc btn-view" data-toggle="modal" data-target="#modal-info-i_file_1" disabled="disabled">Vista Previa&nbsp;&nbsp;<i class="fas fa-file-alt"></i></button> <button type="button" class="btn btn-info btn-disabled remfile" disabled="disabled"><i class="fas fa-minus-square"></i></button> <button type="button" class="btn btn-info addfile" data-file="none"><i class="fas fa-plus-square"></i></button> </div> </div> </div> </div> </div> <div class="col-lg-6"> </div> </div> 

For working add, remove file event contact me.

Answer 2

This css fix my select2 from overflow text when select are inside a input-group:

 .select2-container { position:absolute; }