-
-
Notifications
You must be signed in to change notification settings - Fork 173
Description
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