Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FormGroup: allow setting label-cols=auto #4217

Comments

@hackel
Copy link

@hackel hackel commented Oct 7, 2019

Currently, the labelCols prop only accepts a boolean or a number to explicitly define the percentage of the container the label will fill.

I would like the label to auto-size based on its contents by using the col-auto class on the label instead of col. Specifying label-cols="auto" seems like a reasonable way to do this, or perhaps another boolean prop like label-col-auto.

I can currently achieve what I want like this:

<BFormGroup
    label="Label"
    label-for="input"
    label-cols
    label-class="col-auto"
>
    <BInput />
</BFormGroup>

In this case, the label gets both classes applied, but it works because col-auto overrides the col properties. I just don't feel like it conveys the intent well.

The desired output would be:

<div class="form-row form-group" role="group">
    <label class="col-auto col-form-label" for="input">Label</label>
    <div class="col">
        <input class="form-control" id="input" type="text">
    </div>
</div>
@tmorehouse tmorehouse added Type: Enhancement PR: Minor and removed PR: Minor labels Oct 7, 2019
@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Oct 7, 2019

I think this shouldn't be too difficult to add... it would need to be made available for all label break points

@tmorehouse tmorehouse added this to To do in 2.1.0 via automation Oct 8, 2019
@tmorehouse tmorehouse moved this from To do to In progress in 2.1.0 Oct 8, 2019
2.1.0 automation moved this from In progress to Done Oct 14, 2019
@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Nov 13, 2019

BootstrapVue v2.1.0 has been released, which has added the ability to set label-cols to auto.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment