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

Closed
hackel opened this issue Oct 7, 2019 · 2 comments · Fixed by #4218, mariazevedo88/hash-generator-js#17 or CloudsdaleGroup/AnimFM#3
Closed
Projects

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

This comment has been minimized.

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 added a commit that referenced this issue Oct 14, 2019
@tmorehouse

This comment has been minimized.

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
Projects
2.1.0
  
Done
2 participants
You can’t perform that action at this time.