After searching online, I came across an example of how to create a floating label. I followed the instructions exactly as provided in the example, but when I tested it on my website, it did not work the way it was supposed to. The label would disappear whenever the cursor was focused on the input field. However, it worked correctly when the label was placed outside of the input field. Am I missing something?
Here are the resources I used:
Below is the code snippet:
Index.cshtml
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<label class="control-label" for="txtUsername">Username</label>
<input id="txtUsername" class="form-control" type="text" />
</div>
<div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<span class="input-group-addon"><i class="fa fa-key"></i></span>
<label class="control-label" for="txtPassword">Password</label>
<input id="txtPassword" class="form-control" type="password" />
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<button id="showOverlay" class="btn btn-default form-control" data-toggle="popover" data-content="Submit">Log In</button>
</div>
</div>
</div>
</div>
Site.css
.control-label {
font-size: 14px;
font-weight: 400;
opacity: .6;
pointer-events: none;
position: absolute;
transform: translate3d(-340px, 8px, 0) scale(1);
transform-origin: left top;
transition: 300ms;
z-index: 3;
color: black;
}
.form-group.focused .control-label {
transform: translate3d(-340px, 0, 0) scale(0.75);
}
.form-control {
align-self: flex-end;
}
Site.js
$('.form-control').on('focus blur', function (e) {
$(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');
Your help will be greatly appreciated.
Thank you.