Skip to content
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.

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

[Bug] Styling Clash with Choices.js #35

Open
devandreassimmeth opened this issue Mar 3, 2023 · 0 comments
Open

[Bug] Styling Clash with Choices.js #35

devandreassimmeth opened this issue Mar 3, 2023 · 0 comments

Comments

@devandreassimmeth
Copy link

Version

1.1.1

Reproduction link

http://example.com

Operating System

Windows

Device

Lenovo ThinkPad

Browser & Version

Chrome(110.0.5481.178) / Firefox(newest)

Steps to reproduce

  1. Create a new Angular project.

  2. Install packages: "bootstrap": "5.2.3", "choices.js": "9.0.1", "popper.js": "^1.16.1" (you can also use the newest choices version, same error here)

  3. Add ReactiveForms to Angular project.

  4. Add Soft UI Design System PRO scss/js to assets.

  5. Add styles/scripts to angular.json:

"styles": [
"node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css",
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/choices.js/public/assets/styles/choices.min.css",
"apps/my-app/src/assets/scss/soft-design-system-pro.scss", // Path is like that because we use Nx
...
],
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/choices.js/public/assets/scripts/choices.min.js",
"apps/my-app/src/assets/js/soft-design-system-pro.min.js",
...
]
  1. Add form-element to page:
<label class="form-label" for="selectExample">Example:</label>
<select id="selectExample" #selectExample formControlName="example">
  <option value="value 1">Value 1</option>
  <option value="value 2">Value 2</option>
</select>
  1. Add Choices over Component:
export class ExampleComponent implements AfterViewInit {
  @ViewChild("selectExample") exampleRef!: ElementRef;

  // Create form in constructor or ngOnInit

  ngAfterViewInit() {
    const selectElement = this.exampleRef.nativeElement;
    const choices = new Choices(selectElement);
  }

}

What is expected?

I expect that the Select is displayed like e.g. here (I used dashboard as example, because I don't find a usage in the Soft UI Design System PRO docs):
https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/pages/account/settings.html#basic-info

What is actually happening?

The select is rendered, but instead of the arrow at the end of the field, I have a rectangle (so something that is not found) and the arrow of choices.js is places in the top-left corner of this rectangle.


Solution

I tried to swap the libraries in the style imports. This fixes the issue, but then the Creative Tim styles are not applied to the input field, so it fixes the only semi.

Additional comments

Sorry for not adding a link with the reproduce. Hope it's ok without. If not, please let me know and I will take the time to create one.
And also to avoid confusion: The order ID runs to a different mail address than the one associated with my account. This is because we use Gitlab in the company, so we don't have a Github account. So for simplicity I used my private Github account.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant