CSS fix: primevue autocomplete inside bootstrap input-group

This commit is contained in:
chfhtw
2025-09-02 16:04:47 +02:00
parent b378649b06
commit eae79e9f5e
+29
View File
@@ -5690,3 +5690,32 @@
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}
/* input-group */
/* autocomplete */
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) > .p-autocomplete-input,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control > .p-autocomplete-input,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select > .p-autocomplete-input,
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) > .p-autocomplete-input,
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) > .p-autocomplete > .p-autocomplete-input,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control > .p-autocomplete > .p-autocomplete-input,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select > .p-autocomplete > .p-autocomplete-input,
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) > .p-autocomplete > .p-autocomplete-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) > .p-autocomplete-input,
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) > .p-autocomplete > .p-autocomplete-input {
margin-left: calc(var(--bs-border-width) * -1);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-inputtext.is-invalid:enabled:hover {
border-color: var(--bs-form-invalid-border-color);
}
.p-inputtext.is-invalid:enabled:focus,
.was-validated .p-inputtext:invalid:focus {
border-color: var(--bs-form-invalid-border-color);
box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25);
}