Skip to content

fix(BFormGroup): Apply user classes and label alignment to correct elements in horizontal mode #2943

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.

Sign up for GitHub

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

Jump to bottom
Merged
VividLemon merged 5 commits into from
Dec 12, 2025
Merged

fix(BFormGroup): Apply user classes and label alignment to correct elements in horizontal mode #2943

VividLemon merged 5 commits into from
Dec 12, 2025

Conversation

Copy link
Contributor

Copilot AI commented Dec 10, 2025 •
edited
Loading

Describe the PR

In horizontal layout mode, BFormGroup was applying user-provided classes (like align-items-center) to the outer container and label alignment classes (like text-md-end) to the label element instead of its BCol wrapper, causing both features to fail.

Changes Made

Attribute Routing:

  • Added inheritAttrs: false and manual attribute placement via useAttrs()
  • User classes/styles now route to BFormRow in horizontal mode, root element otherwise
  • Computed properties (rootAttrs, rowAttrs) encapsulate placement logic

Label Alignment:

  • labelAlignClasses now apply to BCol wrapper in horizontal mode
  • Preserved on label element in non-horizontal mode for backwards compatibility

Result:

<!-- Before: classes on wrong elements -->
<fieldset class="align-items-center b-form-group">
  <div class="row">
    <div class="col-md-5">
      <label class="text-md-end">Login:</label>
    </div>
  </div>
</fieldset>

<!-- After: classes on correct elements -->
<fieldset class="b-form-group">
  <div class="row align-items-center">
    <div class="col-md-5 text-md-end">
      <label>Login:</label>
    </div>
  </div>
</fieldset>

Small replication

Form layout with corrected alignment

Labels are now right-aligned (text-md-end) and vertically centered (align-items-center) as expected.

PR checklist

What kind of change does this PR introduce? (check at least one)

  • Bugfix 🐛 - fix(...)
  • Feature - feat(...)
  • ARIA accessibility - fix(...)
  • Documentation update - docs(...)
  • Other (please describe)

The PR fulfills these requirements:

  • Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied
Original prompt

This section details on the original issue you should resolve

<issue_title> Label Align End not working anymore</issue_title>
<issue_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</issue_description>

Comments on the Issue (you are @copilot in this section)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@bolt-new-by-stackblitz
Copy link

bolt-new-by-stackblitz bot commented Dec 10, 2025

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@coderabbitai
Copy link

coderabbitai bot commented Dec 10, 2025

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copilot AI changed the title [WIP] Fix label align end issue in BFormGroup fix(BFormGroup): Apply user classes and label alignment to correct elements in horizontal mode Dec 10, 2025
Copilot AI requested a review from VividLemon December 10, 2025 20:45
@VividLemon VividLemon marked this pull request as ready for review December 12, 2025 14:56
@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 12, 2025

  • bsvn-vite-ts

    npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2943

    npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2943

commit: bdd2c01

@VividLemon VividLemon merged commit 5eeda60 into main Dec 12, 2025
7 of 8 checks passed
@github-actions github-actions bot mentioned this pull request Dec 12, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@VividLemon VividLemon VividLemon approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@VividLemon VividLemon

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

<BFormGroup> Label Align End not working anymore

2 participants

@VividLemon