Floating labels

0
We are currently building a custom design system based on Atlas 3 that meets our companies styling requirements. Most of the widgets we can style fairly easy, but we are running into issues with floating labels on forms.  Although there are plenty of solutions described using css only styling all are based on placing the label after the input field. See this example https://getbootstrap.com/docs/5.0/forms/floating-labels/. In Mendix however we have no possibility to place the label after the input field.  Did others  find a solution for css only floating labels?
asked
1 answers
0

This can be done through CSS but it is not ideal due to needing to populate the placeholder attribute, on the input you need to populate the placeholder with a space (this makes sure when data is entered it and you unfocus it then it stays away) and with whatever label you need. image.pngThen apply the fancy-input class to the input, this class is defined as follows:

.fancy-input{

position:relative;

display: flex;

flex-wrap: wrap;

margin-bottom:0;

width:100%;

> label.control-label{

position: absolute;

left: 8px;

top: 12px;

max-width: calc(100% - 16px);

line-height: 24px;

transition: all .3s;

pointer-events: none;

z-index: 1;

margin: 0px;

color:$neutral-14;

}

&:has(input:focus) > label.control-label,

&:has(input:focus):valid > label.control-label,

&:has(input:not(:placeholder-shown)) > label.control-label,

&:has(textarea:focus) > label.control-label,

&:has(textarea:focus):valid > label.control-label,

&:has(textarea:not(:placeholder-shown)) > label.control-label,

&:has(.widget-combobox-text):not(:has(.widget-combobox-placeholder-empty)) > label.control-label

{

position: absolute;

left: 8px;

top: 8px;

max-width: calc(100% - 16px);

height: 14px;

line-height: 14px;

pointer-events: none;

font-size: 12px;

font-weight: 400;

}

&:has(input:not(:focus)):valid .widget-combobox-placeholder-empty > .widget-combobox-caption-text,

&:has(input:not(:focus)) .widget-combobox-placeholder-empty > .widget-combobox-caption-text,

&:has(input:not(:focus)):valid .widget-combobox-placeholder-empty,

&:has(input:not(:focus)) .widget-combobox-placeholder-empty

{

color:transparent;

}

&:has(.widget-combobox-placeholder-empty):has(input:focus) .widget-combobox-placeholder-text.widget-combobox-placeholder-empty

{

color:$neutral-14;

}

.form-control{

padding-bottom: 7px;

line-height: 14px;

border:0;

box-shadow: inset 0 0 0 .0625rem $form-input-border-color;

margin-bottom: 16px;

&.widget-combobox-input-container{

padding:0px;

padding-right:8px;

box-shadow: inset 0 0 0 .0625rem $form-input-border-color;

& .widget-combobox-input{

background-color: transparent;

}

}

}

input.form-control,

input.widget-combobox-input

{

padding-top:22px;

}

> textarea.form-control{

padding-top:26px;

}

.widget-combobox-selected-items{

border:0;

&> .widget-combobox-input{

padding: 22px 8px 7px 8px;

}

&> .widget-combobox-placeholder-text{

padding: 24px 8px 5px 8px;

> span{

font-size: 16px;

}

}

 

}

}

 

You may need to replace some of the color variables with your own. THis should give you this behaviour with the label (the shadow is from our input styling): 

image.pngimage.png

It is compatible with inputs, comboboxes, and text areas.

answered