Is there a way to implement Bootstrap floating labels with TWebEdit? Here's what I'm doing using bootstrap. (1)When the field is empty, label appears in input box. (2)When there is data in the input box, the label floats above, (3)when input box has focus and is empty, label floats above. See sample
I'm not sure what exact Bootstrap you use.
Looking at Floating labels · Bootstrap v5.0
then insert the HTML
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
in the form template and connect TWebEdit by setting TWebEdit.ElementId = "floatingInput"
It doesn't' work as I'd like and shown in my sample. I'm using Bootstrap 5 Here is the CSS:
.form-group label {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
transition: 0.3s;
pointer-events: none;
color: #777;
background-color: white;
padding: 0 5px;
}
.form-control:focus + label,
.form-control:valid + label,
.form-control[data-empty="false"] + label {
top: 0;
font-size: 0.8rem;
color: #005ebf;
}
and here is the HTML:
{```
<div class="form-group">
<input type="text" class="form-control" id="LstName" required>
<label for="LstName">Last Name<star>*</star></label>
</div>
What is " it doesn't work" ?
How specifically is TMS WEB Core affecting this?
(1)When the field is empty, label appears in input box - does not work
(2)When there is data in the input box, the label floats above - this works
(3)when input box has focus and is empty, label floats above - this works
Maybe I'm making it too complex, thanks Bruno
But is this the TMS WEB Core framework causing it?
When I assign the TWebEdit Element ID my item #1 does not work. It does work without using TWebEdit. Does that clarify?
No
Isolate this, send a test project that contains an unlinked input working as expected and a linked input that is not behaving as expected so we can investigate.
Solve this by setting WebEdit.Required = true
That's it! Thank you so much