GovAlta
fix(#2441): popover max width should be equal with dropdown width
Before (the change)
Issue 1: Resize the browser the pop-over for dropdown isn't aligned.
Issue 2: It seems to be fixed by https://github.com/GovAlta/ui-components/issues/2466
After (the change)
https://github.com/user-attachments/assets/a0f39f72-c582-4a4d-94ca-e8861db62d64
Make sure that you've checked the boxes below before you submit the PR
- [x] I have read and followed the setup steps
- [x] I have created necessary unit tests
- [x] I have tested the functionality in both React and Angular.
Steps needed to test
Code below to test both 2 issues
Angular code:
<p> Issue: If you resize the browser, the popover of the dropdown will be bigger and not fit into the dropdown's input width.</p>
<p> Issue: If you make the dropdown at the bottom, popover should be above the dropdown but now it is at the below</p>
<div style="height: 500px"></div>
<div style="margin-bottom:30px">
<goab-form-item label="Country">
<goab-dropdown
name="genderId"
width="100%"
placeholder="--Select Country--"
formControlName="countryDropdown"
>
<goab-dropdown-item value="null" label="--Select Country--"></goab-dropdown-item>
@for (country of countries; track country.code) {
<goab-dropdown-item [value]="country.code" [label]="country.name">
</goab-dropdown-item>
}
</goab-dropdown>
</goab-form-item>
</div>
import { Component } from "@angular/core";
import { GoabDropdown, GoabDropdownItem, GoabFormItem } from "@abgov/angular-components";
import { Countries } from "../../countries.data";
import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
@Component({
selector: "abgov-issue-2441",
templateUrl: "./issue-2441.component.html",
standalone: true,
imports: [GoabFormItem, GoabDropdown, GoabDropdownItem, ReactiveFormsModule],
})
export class Issue2441Component {
countries = Countries;
fb!: FormGroup;
constructor() {
this.fb = new FormGroup({
countryDropdown: new FormControl(null),
});
}
}
Tested and looks good to me, @syedszeeshan you still need to test and review
Test passed.
Code reviewed.
Might not be related to this PR but Is this something of a concern?
-The 1st one is b/c of an empty entry { code: "", name: "" }, in the coutnries list. so we can ignore that
:tada: This PR is included in version 1.33.0-alpha.16 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 6.3.0-alpha.6 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.3.0-alpha.4 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 1.3.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.3.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 1.33.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 6.3.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket: