bootstrap-flask icon indicating copy to clipboard operation
bootstrap-flask copied to clipboard

Support to not displaying labels for form inputs

Open PanderMusubi opened this issue 4 years ago • 8 comments

When a WTForms field has no label, a label is generated from the variable name it is assigned to, e.g. for a TextAreaWidget. This is very useful (convention over configuration).

However, in certain cases, the label of an input is not added to thre resulting HTML. What parameter can be used when creating a WTForm field in order to extend the form template here to not add the label around an input?

This relates to:

  • https://github.com/greyli/bootstrap-flask/blob/master/flask_bootstrap/templates/bootstrap/form.html#L47
  • https://github.com/greyli/bootstrap-flask/blob/master/flask_bootstrap/templates/bootstrap/form.html#L70
  • https://github.com/greyli/bootstrap-flask/blob/master/flask_bootstrap/templates/bootstrap/form.html#L124
  • https://github.com/greyli/bootstrap-flask/blob/master/flask_bootstrap/templates/bootstrap/form.html#L152

PanderMusubi avatar Dec 07 '19 14:12 PanderMusubi

You can control this simply with the CSS below:

<style>
    .form-control-label { display: none; }
</style>

greyli avatar Apr 25 '20 03:04 greyli

I'd need to set this separately for each text area, so looking for a way to do this directly from Python when creating the particular field or from Python for all fields that do not have a label as to minimize using CSS.

PanderMusubi avatar Apr 25 '20 13:04 PanderMusubi

@greyli Any new thoughts on how to support this from Python?

PanderMusubi avatar Jul 30 '20 09:07 PanderMusubi

For Bootstrap 5 it is:

.form-label {
    display: none;
}

At the moment in app.py:

  • specify a label, the label is used
  • do not specify a label (i.e. None), the object name is used as label, which is a good way to default it

Proposal to extend with:

  • using empty string '' to hide the label (if one needs an empty label, use a space ' ', both should be documented)

This keeps the current behaviour and only extends it. Benefit is that all can be achieved without using custom CSS.

PanderMusubi avatar Jan 12 '22 14:01 PanderMusubi

This would involve overriding https://github.com/wtforms/wtforms/blob/master/src/wtforms/fields/core.py#L446 so it returns an empty string. I'm not sure if we would like to do this or how we can do this. Any ideas? @greyli

PanderMusubi avatar Jan 20 '22 16:01 PanderMusubi

If we cannot accommodate a solution, would it be a feature request for wtforms?

PanderMusubi avatar Jan 20 '22 16:01 PanderMusubi

Would this also be a feature request for wtforms? https://github.com/greyli/bootstrap-flask/blob/master/flask_bootstrap/init.py#L9

PanderMusubi avatar Jan 20 '22 16:01 PanderMusubi

Setting form_type="inline" hides the label (e.g. <label class="visually-hidden" for="username">Username</label>) , could this be a solution too?

marmstr93ng avatar Apr 11 '24 15:04 marmstr93ng