laravel-form-select2-globallisted
Install: claude install-skill Yaz-inc/yazinc-ai-toolkit
# Laravel Global Form + Select2 Consistency
One CSS source of truth in the **layout stylesheet** — all pages inherit the same field height. No per-page Select2 padding hacks.
## When to use
- Bootstrap 5 + Select2 4.x + bootstrap-5 theme
- Mixed native `<select>` and Select2-enhanced selects look different heights
- DataTable filter dropdowns, modals, and forms should align visually
## Stack
- CSS variables in `resources/views/layouts/sections/styles.blade.php` (or compiled SCSS)
- Select2 CDN + `select2-bootstrap-5-theme`
- Init Select2 in layout/scripts or page scripts — styling is global regardless
## Core pattern
```css
:root {
--cd-field-padding-y: 0.4375rem;
--cd-field-padding-x: 0.875rem;
--cd-field-padding-y-sm: 0.25rem;
--cd-field-padding-x-sm: 0.625rem;
--cd-field-height: calc((var(--cd-field-padding-y) * 2) + (1.5 * 1em) + 2px);
--cd-field-height-sm: calc((var(--cd-field-padding-y-sm) * 2) + (1.5 * 0.875em) + 2px);
}
/* Native selects match computed height */
.form-select:not(.select2-hidden-accessible):not([multiple]) {
min-height: var(--cd-field-height);
}
/* Select2 bootstrap-5 theme */
.select2-container--bootstrap-5 .select2-selection--single {
height: var(--cd-field-height);
min-height: var(--cd-field-height);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
line-height: calc(var(--cd-field-height) - 2px);
padding-left: var(--cd-field-padding-x);
paddi