Skip to content

<BFormGroup> Label Align End not working anymore #2942

@susanne99

Description

@susanne99

Describe the bug

I updated to the latest 0.40.9 version
til now, it works with this code:

<BFormGroup
      label="Login:"
      :label-for="uuid +'loginname'"
      label-align-md="end"
      label-cols-md="5"
      label-cols-lg="3"
      class="align-items-center pms-form-group">

      <BFormInput
          :id="uuid +'loginname'"
          size="sm"
          trim
          maxlength="50"
          required
          autocomplete="loginname"
          autofocus
          v-model="formdata.loginname">
      </BFormInput >

  </BFormGroup>

WORKING in Version 0.22
<div class="row">
    <div class="col">
        <div class="row d-flex flex-wrap align-items-center pms-form-group" id="__BVID__850793___BV___" role="group">
            <label class="col-md-5 col-lg-3 col-form-label col-form-label text-md-end" id="__BVID__317245___BV__BV_label___" for="login-c15f1ef8-29d8-4ae7-803f-c5e407388b19-loginname">Login:</label>
            <div class="col">
                <input id="login-c15f1ef8-29d8-4ae7-803f-c5e407388b19-loginname" class="form-control form-control-sm" type="text" required="" autocomplete="loginname" aria-required="true" trim="" maxlength="50" value="">
            <!----><!----><!---->
            </div>
        </div>
    </div>
</div>




NOT WORKING in Version 0.40
<div class="row">
    <div class="col">
        <div id="BootstrapVueNext__ID__v-1__" role="group" class="b-form-group align-items-center pms-form-group">
            <!----><!---->
         <div class="row d-flex flex-wrap">
            <div class="col-md-5 col-lg-3">
                <label id="BootstrapVueNext__ID__v-2___BV_label____" for="login-2a04e291-9a6a-4b54-9d99-e00ed483ea51-loginname" class="col-form-label col-form-label text-md-end">Login:</label>
            </div>
            <div class="col">
                <input id="login-2a04e291-9a6a-4b54-9d99-e00ed483ea51-loginname" class="form-control form-control-sm" type="text" required="" autocomplete="loginname" aria-required="true" trim="" maxlength="50" value="">
            <!----><!----><!---->
            </div>
        </div>
    </div>
</div>
</div>

problem 1: label-align-md="end" does not work anymore, because the bformgroup DOM-Structure is different to the version 0.22.7 i want the label right aligned

problem 2: align-items-center no longer works because the bformgroup is structured differently than in version 0.22. I want the label and input to be vertically centered, but that's no longer possible. Why change things that used to work? Aren't there enough bugs to fix?

when is set: label-class="w-100" then the text is right aligned - it works, but this is tricky and not compatible

bformgroup is the most frequently used component, and then this happens. I can't possibly rebuild all my forms!

thanks in advance for your help

Reproduction

it is easy, put it in a template or look at your own documentation - it doesn't work too there
https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs/components/form-group.html

Used Package Manager

npm

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions