Closed amo13 closed 1 year ago
<main class="d-flex align-items-center py-4 bg-body-tertiary"> <div class="form-signin w-100 px-3 m-auto" style="max-width: 460px;"> <%= simple_form_for @user, url: user_registration_path, wrapper: :floating_labels_form, wrapper_mappings: { select: :floating_labels_select } do |f| %> <%= f.error_notification %> <div class="form-inputs"> <%= f.input :email, required: true, input_html: { autocomplete: "email" } %> <div class="form-floating"> <!-- for comparison --> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> </div> <div class="form-actions"> <%= f.submit class: "btn btn-primary" %> </div> <% end %> <%= render "devise/shared/links" %> </div> </main>
The generated HTML is:
<main class="d-flex align-items-center py-4 bg-body-tertiary"> <div class="form-signin w-100 px-3 m-auto" style="max-width: 460px;"> <form class="simple_form new_user" id="new_user" novalidate="novalidate" action="/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="ASCOUhV4M8HGPxUuAlfdcTmWVIHBGJEb5yZi7ZDmMcBIW9br6smB-Elpm7AWyWZ89ltwg95ODP5eeTvsYWGHlQ" autocomplete="off"> <div class="form-inputs"> <div class="form-floating mb-3 email required user_email"> <input class="form-control string email required" autocomplete="email" required="required" aria-required="true" type="email" value="" name="user[email]" id="user_email"> <label class="email required" for="user_email"> Email <abbr title="required">*</abbr> </label> </div> <div class="form-floating"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> </div> <div class="form-actions"> <input type="submit" name="commit" value="Create User" class="btn btn-primary" data-disable-with="Create User"> </div> </form> <a href="/users/sign_in">Log in</a><br> <a href="/users/confirmation/new">Didn't receive confirmation instructions?</a><br> <a href="/users/unlock/new">Didn't receive unlock instructions?</a><br> </div> </main>
The html generated with the form helper should look and behave the same as the floating labels bootstrap example (inserted without the helper for comparison)
I am sorry, it seems that I was just missing the placeholder which needs to be set.
Environment
Current behavior
The generated HTML is:
Expected behavior
The html generated with the form helper should look and behave the same as the floating labels bootstrap example (inserted without the helper for comparison)![Screenshot from 2023-06-30 00-47-32](https://github.com/heartcombo/simple_form/assets/6617661/4942acdd-df2b-41bf-9bfb-c79b57065fc7)