b-form-timepicker label text wrap

[naletups]

Describe the bug

Strange text wrap effects of the label inside the collapsed b-form-timepicker destroy clean alignment inside form "grid".

Find attached the picture. There should be plenty of space to place the content. However, the inner text of the displayed value "wraps" a blank space or something.

Without any input in the box, the spacing to the next b-form-row is as expected (same as from duration row below to next element afterwards). Switching to another locale, e.g. German, whose display is shorter removes the text wrap.

Setup

Around the timepicker component, there is a chain of b-form-group (with label-cols set), b-col, b-form-row and b-form. Is one of their settings polluting a setting in timepicker label?

Expected behavior

The highlighted area implies that there should be enough space to layout the text element?!

Versions

Libraries:

• BootstrapVue: 2.15.0
• Bootstrap: 4.5.0
• Vue: 2.x

Environment:

• Devices: Laptop, Mobile
• Browser: Chromium, Firefox, Opera mini

QuickFix

For the moment, I fix it with a CSS deep selector, but I wanted to know if someone has a clue on the why it happens?

.textwrapfix >>> label.form-control {
  white-space: nowrap !important;
}

[Hiws]

If you could create a reproduction of the issue, that would be helpful.
You can export a ready-to-use template on the playground.

[naletups]

ok, by playing around in the playground, I could narrow down the root cause: it's caused by a reactivity switch from column to row of b-form-row. It seems, the inner label is still be told to be rendered as a column with only a fraction of the space, although the outer components have wrapped to a much wider col-8 column.

You have to resize to from MD to SM break point to see it.

code

<div>
  <b-form id="myform">
    <b-form-row class="flex-column flex-sm-row">
      <b-col cols="auto" sm="6">
        <b-form-group label="input1a" label-cols="4">
          <b-input-group prepend="#">
            <b-input></b-input>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col cols="auto" sm="6">
        <b-form-group label="input1b" label-cols="4">
          <b-input-group prepend="#">
            <b-input></b-input>
          </b-input-group>
        </b-form-group>
      </b-col>
    </b-form-row>
    <b-form-row class="flex-column-reverse flex-sm-row">
      <b-col cols="auto" sm="6">
        <b-form-group label="input2a" label-cols="4">
          <b-form-timepicker locale="en-US" id="123" required hide-header no-close-button v-model="time" form="myform">
          </b-form-timepicker>
        </b-form-group>
      </b-col>
      <b-col cols="auto" sm="6">
        <b-form-group label="input2b" label-cols="4">
          <b-input-group prepend="#">
            <b-input></b-input>
          </b-input-group>
        </b-form-group>
      </b-col>
    </b-form-row>
    <b-form-row class="flex-column flex-sm-row">
      <b-col cols="auto" sm="6">
        <b-form-group label="input3a" label-cols="4">
          <b-input-group prepend="#">
            <b-input></b-input>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col cols="auto" sm="6">
        <b-form-group label="input3b" label-cols="4">
          <b-input-group prepend="#">
            <b-input></b-input>
          </b-input-group>
        </b-form-group>
      </b-col>
    </b-form-row>
  </b-form>
</div>

{
  data() {
    return {
      name: 'BootstrapVue',
      time: null
    }
  }
}

[naletups]

Interestingly enough, in my case it does not "wrap" for null input, but only if I select a time.

Maybe for testing, you could set for null input: label-no-time-selected="E" on the form-timepicker component

[Hiws]

I'm still not sure what the root cause is.

But if you change <b-col cols="auto"> to <b-col cols="12"> it seems to fix the spacing issue.
It's also fixed by removing h-auto from the label.

I've changed up your example a bit, to achieve the same result (with no extra space when collapsed).
https://codepen.io/Hiws/pen/abdwNRz

[naletups]

Thanks, then I will go with this cols="12" approach for the moment.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!