Skip to content
Permalink
Browse files

feat(b-form-group): allow setting label cols props to `auto` (closes #…

  • Loading branch information
tmorehouse committed Oct 14, 2019
1 parent 605d4c4 commit 21a822b9416f996cccf828e65dc029eba849277b
Showing with 7 additions and 4 deletions.
  1. +6 −3 src/components/form-group/README.md
  2. +1 −1 src/components/form-group/form-group.js
@@ -79,9 +79,10 @@ By default, the label appears above the input element(s), but you may optionally
(label to the left of the input) at the various standard Bootstrap breakpoints.

The props`label-cols` and `label-cols-{breakpoint}` allow you to specify how many columns the label
should occupy in the row. The input(s) will fill the rest of the row. The value must be a number
should occupy in the row. The input will fill the rest of the row width. The value must be a number
greater than `0`. Or you can set the prop to `true` to make the label and input(s) each occupy half
of the width of the rendered row (handy if you have custom Bootstrap with an odd number of columns).
of the width of the rendered row (handy if you have custom Bootstrap with an odd number of columns),
or set the value to `'auto'` so that the label occupies only the width that is needed.

| prop | description |
| --------------- | --------------------------------- |
@@ -107,6 +108,8 @@ of the width of the rendered row (handy if you have custom Bootstrap with an odd
</div>
</div>

The ability to set the label cols to `'auto'` was added in BootstrapVue version <samp>2.1.0</samp>.

<!-- b-form-group-horizontal.vue -->
```

@@ -228,7 +231,7 @@ of related form controls:
Setting the `disabled` prop will disable the rendered `<fieldset>` and, on most browsers, will
disable all the input elements contained within the fieldset.

`disabled` has no effect when `label-for` is set (as a `fieldset` element is not rendered).
`disabled` has no effect when `label-for` is set (as a `<fieldset>` element is not rendered).

## Validation state feedback

@@ -258,7 +258,7 @@ export const BFormGroup = {
// Handle case where the prop's value is an empty string,
// which represents true
propVal = propVal === '' ? true : propVal || false
if (!isBoolean(propVal)) {
if (!isBoolean(propVal) && propVal !== 'auto') {
// Convert to column size to number
propVal = parseInt(propVal, 10) || 0
// Ensure column size is greater than 0

0 comments on commit 21a822b

Please sign in to comment.
You can’t perform that action at this time.