From b239f527193ec4b899982928dd0d5ea3e8ebefd1 Mon Sep 17 00:00:00 2001 From: Deon George Date: Wed, 4 Dec 2024 15:19:44 +1100 Subject: [PATCH] Updates to bootstrap/select2 --- app/Helpers/PageAssets.php | 5 +-- public/css/fixes.css | 34 +++++++++++++------ .../views/components/form/select.blade.php | 8 +++-- .../layouts/partials/htmlheader.blade.php | 2 +- .../views/layouts/partials/scripts.blade.php | 2 +- 5 files changed, 33 insertions(+), 18 deletions(-) diff --git a/app/Helpers/PageAssets.php b/app/Helpers/PageAssets.php index 25ea635..84a70cc 100644 --- a/app/Helpers/PageAssets.php +++ b/app/Helpers/PageAssets.php @@ -109,10 +109,11 @@ class PageAssets 'select2' => [ 'base' => [ 'css' => [ - '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css', + '//cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css', + '//cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css', ], 'js' => [ - '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js', + '//cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js', '/plugin/select2/fix-autofocus.js', ], ], diff --git a/public/css/fixes.css b/public/css/fixes.css index 8e37544..31931f0 100644 --- a/public/css/fixes.css +++ b/public/css/fixes.css @@ -1,15 +1,27 @@ /* Fixes for select 2 and our theme */ -/* -.select2 .select2-container .select2-container--classic { width: 80% !important;} -*/ -.select2-container .select2-selection--single { border-radius: 0 4px 4px 0; height: inherit;} -.select2-container .select2-selection--single .select2-selection__rendered { line-height: 36px; } -.select2-container--classic .select2-selection--single .select2-selection__arrow { line-height: 36px; } -.select2-results { color: #000; } -/* -.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable, - */ -.select2-container--default .select2-results__option--selected { background-color: #024cc4; color: #eeeeee;} +/* The opened input box */ +.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { + line-height: 1.0; + border: 1px solid #aaa; +} + +.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { + line-height: 1.2; + padding: 0.3rem 0.2rem 0.3rem 0.4rem; + font-size: 85%; +} + +select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear +{ + width: 0.5rem; + height: 0.5rem; +} + +.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder +{ + line-height: 1.0; + font-size: 90%; +} /* Bootstrap 5 fixes */ /* select import, round the right side */ diff --git a/resources/views/components/form/select.blade.php b/resources/views/components/form/select.blade.php index 560282b..cf29001 100644 --- a/resources/views/components/form/select.blade.php +++ b/resources/views/components/form/select.blade.php @@ -1,6 +1,6 @@ - @if(empty($value) || isset($addnew) || isset($choose)) @isset($addnew) @@ -47,14 +47,16 @@ $(document).ready(function() { $('#{{ $id ?? $name }}').select2({ + theme: 'bootstrap-5', dropdownAutoWidth: true, width: 'style', + allowClear: true, + placeholder: '', @isset($addvalues) tags: true, @isset($placeholder) - placeholder: '{{ $placeholder ?? '' }}', + placeholder: '{{ $placeholder }}', @endisset - allowClear: true, @endisset }); }); diff --git a/resources/views/layouts/partials/htmlheader.blade.php b/resources/views/layouts/partials/htmlheader.blade.php index f410820..d2c898f 100644 --- a/resources/views/layouts/partials/htmlheader.blade.php +++ b/resources/views/layouts/partials/htmlheader.blade.php @@ -10,7 +10,7 @@ - + diff --git a/resources/views/layouts/partials/scripts.blade.php b/resources/views/layouts/partials/scripts.blade.php index af633a9..9ea8e0d 100644 --- a/resources/views/layouts/partials/scripts.blade.php +++ b/resources/views/layouts/partials/scripts.blade.php @@ -3,7 +3,7 @@ - +