CODEWITHSUNDEEP
javascriptfocusmaterial-designbootstrap-4autofocus
janssen-dev
janssen-dev

Reputation: 2771

Bootstrap Material Design(4.1.1)'s bmd-label-floating not working well with autofocus attribute

1. On page load

The autofocus attribute doesn't trigger the Bootstrap-JavaScript to add the is-focused class to the corresponding (bmd-)form-group.

1

<fieldset class="form-group bmd-form-group">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>



2. After some typing

When typing something in the field, the label goes up because is-filled gets added, but the focus is still not recognized.

2

<fieldset class="form-group bmd-form-group is-filled">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>



3. After reselecting (desirable output)

Deselecting the text-input (with mouseclicks or the tab-key) and then selecting it again is the only way to get the is-focused class (and therefore making it look like it should).

3

<fieldset class="form-group bmd-form-group is-filled is-focused">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>




Question

Is there any fix or workaround to this problem?

Bootstrap Material Design used: https://fezvrasta.github.io/bootstrap-material-design/ (Version 4.1.1)


Source/input html:

<fieldset class="form-group">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

Upvotes: 0

Views: 5295

Answers (3)

Alec Schmitz
Alec Schmitz

Reputation: 11

<script> $('body').bootstrapMaterialDesign({}); </script>

add this to your website if you're using https://fezvrasta.github.io/bootstrap-material-design This will fix forms etc.

Upvotes: 1

sathish
sathish

Reputation: 359

If you guys are using like below code it's fine (bmd-)form-group.

<input type="text" class="form-control text-light" id="usernameControl" name="username">

If you are using property like autofocus,required,readonly ect.. i:

autofocus, required, readonly and alike, it wouldn't work, so you have to add a new custom class to work this scenario.

Upvotes: 0

janssen-dev
janssen-dev

Reputation: 2771

My solution: Hardcoding the is-focused class to the corresponding (bmd-)form-group of the autofocused item works.

<fieldset class="form-group is-focused">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

Upvotes: 1

Related Questions