django-crispy-forms / django-crispy-forms/crispy-bootstrap5

FloatingField has unnecessary field.name as placeholder, placeholder isnt hidden

Open
#212 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
525
Forks
77
Avg merge
1d 1h
Merged PRs (30d)
2

Description

Image

placeholder can be seen when floatingfield is closed, by default is field.name.

```
{% load crispy_forms_field %}

{% if field.is_hidden %}
{{ field }}
{% else %}
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="form-floating mb-3{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">

{% if field|is_select %}
{%if field.errors %}
{% crispy_field field 'class' 'form-select is-invalid' 'placeholder' ' ' %}
{% else %}
{% crispy_field field 'class' 'form-select' 'placeholder' ' ' %}
{% endif %}
{% else %}
{% if field.errors %}
{% crispy_field field 'class' 'form-control is-invalid' 'placeholder' ' ' %}
{% else %}
{% crispy_field field 'class' 'form-control' 'placeholder' ' ' %}
{% endif %}
{% endif %}


{{ field.label }}{% if field.field.required %}*{% endif %}

{% include 'bootstrap5/layout/help_text_and_errors.html' %}


document.addEventListener('DOMContentLoaded', function() {
const employeeIdInput = document.getElementById('{{ field.auto_id }}');

if (employeeIdInput) {
employeeIdInput.addEventListener('focus', function() {
this.placeholder = '{{field.name}}';
});

employeeIdInput.addEventListener('blur', function() {
if (this.value === '') {
this.placeholder = ' ';
}
});
}
});


{% endif %}
``
```
^ scuffed band-aid fix for floatingfield

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.