diff --git a/InvenTree/static/css/inventree.css b/InvenTree/static/css/inventree.css index 5147547275..50d10547e1 100644 --- a/InvenTree/static/css/inventree.css +++ b/InvenTree/static/css/inventree.css @@ -10,6 +10,11 @@ color: #ffcc00; } +/* Force select2 elements in modal forms to be full width */ +.select-full-width { + width: 100%; +} + /* Part image icons with full-display on mouse hover */ .hover-img-thumb { @@ -118,6 +123,10 @@ z-index: 99999999; } +.modal-dialog { + width: 45%; +} + .modal-content h3 { margin-top: 3px; margin-bottom: 3px; diff --git a/InvenTree/static/script/inventree/modals.js b/InvenTree/static/script/inventree/modals.js index bc7228063f..07de6950df 100644 --- a/InvenTree/static/script/inventree/modals.js +++ b/InvenTree/static/script/inventree/modals.js @@ -13,8 +13,11 @@ function attachSelect(modal) { $(modal + ' .select').select2({ dropdownParent: $(modal), // dropdownAutoWidth parameter is required to work properly with modal forms - dropdownAutoWidth: true, + dropdownAutoWidth: false, }); + + $(modal + ' .select2-container').addClass('select-full-width'); + $(modal + ' .select2-container').css('width', '100%'); }