angularsassbootstrap-5angular-ngselect

Angular ng-select component style like bootstrap v5 form-select with floating label


The issues is that library @ng-select/ng-select doesn't support boostrap 5 floating label style.


Solution

  • I've written this SCSS to style the ng-select like a boostrap 5 form-select inside a floating-label, you must change colors and spacing variables to match yours if you're not using default values. I've not manager loading status or other things related to the ng-select, also the caret on the right is the default of ng-select (not of bootstrap, need to be changed)

    .form-floating {
        position: relative;
    
        .ng-select-container {
            height: calc(3.5rem + 2px) !important;
            line-height: 1.25;
        }
    
        label {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; // allow textareas
            padding: 1rem 0.75rem;
            overflow: hidden;
            text-align: start;
            text-overflow: ellipsis;
            white-space: nowrap;
            pointer-events: none;
            border: 1px solid transparent; // Required for aligning label's text with the input as it affects inner box model
            transform-origin: 0 0;
            transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
        }
    
        .ng-select-container {
            padding-top: 1.625rem;
            padding-bottom: .625rem;
    
            .ng-input {
                top: unset !important;
            }
        }
    
        ng-select {
            ~label {
                opacity: 0.65;
                transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
                z-index: 1001;
            }
    
    
            &:focus .ng-select-container {
                border-color: #86b7fe;
                outline: 0;
                box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
            }
    
            &.is-valid .ng-select-container {
                border-color: #198754 !important;
            }
    
            &.is-valid.ng-select-focused .ng-select-container {
                box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
            }
    
            &.is-invalid .ng-select-container {
                border-color: #dc3545 !important;
    
            }
    
            &.is-invalid.ng-select-focused .ng-select-container {
                box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
            }
        }
    }