Ultima Theme - floating labels are overlapping input

[sehaas]

Describe the bug

The min-height introduced with primefaces/primefaces#14650 in combination with the theme config Input Background: Outlined causes a non-transparent background which hides the input value.

example:

example with the label boundaries highlighted:

I'm not sure, if this is the correct place to report theme bugs.

Reproducer

• Primefaces 15.0.13 or 15.0.14
• Ultima Theme (Input Background: outlined)
• Insert text into a input with floating label

Expected behavior

The label background should only cover the label-text.

PrimeFaces edition

Community

PrimeFaces version

15.0.14

Theme

Ultima

JSF implementation

Mojarra

JSF version

4.1

Java version

21

Browser(s)

No response

[melloware]

Yep probably needs an Ultima tweak to match @tandraschko

[tandraschko]

@melloware any idea how to fix it?
i could update ultima PF version and reploy, so we can see it on the showcase

[melloware]

let me reproduce and see if I can fix it

[melloware]

@tandraschko if you find \webapp\resources\layout\styles\theme\extensions\_float_label.scss

This disabled the min height ONLY in the outlined scenario everything is wokring fine in the FILLED scenario.

see the change I made below in // ✅ Added rule (nested properly) ...

body {
    .ui-float-label input.ui-state-focus ~ label,
    .ui-float-label input.ui-state-filled ~ label,
    .ui-float-label textarea.ui-state-focus ~ label,
    .ui-float-label textarea.ui-state-filled ~ label,
    .ui-float-label .ui-inputwrapper-focus ~ label,
    .ui-float-label .ui-inputwrapper-filled ~ label {
        top: -.5rem !important;
        background-color: $inputBg;
        padding: 2px 4px;
        margin-left: -4px;
        margin-top: 0;
    }

    .ui-float-label textarea ~ label {
        margin-top: 0;
    }

    .ui-float-label input.ui-state-focus ~ label,
    .ui-float-label .ui-inputwrapper-focus ~ label {
        color: $inputFocusBorderColor;
    }

    .ui-float-label {
        > label {
            margin-left: 0;
        }
    }

    // ✅ Added rule (nested properly)
    .ui-input-outlined {
        .ui-float-label {
            .ui-outputlabel {
                min-height: unset;
            }
        }
    }

    &.ui-input-filled, .ui-input-filled {
        .ui-float-label {
            .ui-inputfield {
                @include filled-input-float-label();
            }

            input.ui-state-focus ~ label,
            input.ui-state-filled ~ label,
            textarea.ui-state-focus ~ label,
            textarea.ui-state-filled ~ label,
            .ui-inputwrapper-focus ~ label,
            .ui-inputwrapper-filled ~ label {
                top: .25rem !important;
                margin-top: 0;
                background: transparent;
            }
        }
    }
}

[tandraschko]

thanks, will fix it for the next release