Hello Community.

I've been replacing the input fields in the Web App I'm working on with the new Animated Label ones. I'm having trouble with the Combo Box. Is there any way to make these Animated Label widgets work with Combo Boxes and/or List Boxes? When I use this new Widget while putting a Combo Box in the Input Placeholder the behavior is not what I expected: It's looks like a normal field (non-animated Label above Input)


Thanks!! 

Hi Lopesclaudio,

please find the screenshot below fro reference, you need to override the class .animated-label-text and change position value to initial, it will fix your problem.

Hello Lopesclaudio,


You can't select a parent of a class using selectors in CSS. So I used a work around.


1. I inserted the animated label and the combo box inside a container.


2. I created two classes. One for when a value is selected and another when there is no selection.

.empty-dropdown and .selected-dropdown


3. In the Style Classes property of the container I inserted a condition.

If(ComboBoxVar=NullIdentifier(),"empty-combobox","selected-combobox")

This condition depends on the variable that stores the value chosen in the combo box.


4. I added the styles I wanted to the animated labels that are inside this container.

.empty-combobox .animated-label-text {
  color:  green;  
}

.selected-combobox .animated-label-text {
    color: blue;
}


This way is possible to edit the label based on the value of the combo box selected.


I hope this helps.


Regards,

Nuno Pereira