Floating Labels

Videos
,
21

I'm trying to have a floating label that displays the field purpose and a countdown for characters entered:

Menu Title 30/30

This is the code.

'Menu Title '+(30 - inp_sel_menu.value.length())+'/30'

Issue:

When the Data Bindings dialogue is closed it converts the '/30' to math and divides by 30. Here's the code after immediately reopening the field:

'Menu Title '+(30-inp_sel_menu.value.length())/30

Syntax on my part I assume.

22 
<div class="form-floating mb-3">
    <input type="text" class="form-control" id="input1" name="input1" placeholder="Enter some text" maxlength="30">
    <label for="input1">Menu Title {{30 - input1.value.length()}}/30</label>
</div>
1 Like
23

Thanks @ben - as always thanks for your assistance

1 Like