search

infor-design / enterprise-ng

Angular wrappers for IDS Enterprise components
Apache License 2.0
55 stars 82 forks source link

SohoAccordion: accordion has fixed width when used inside modal #1719

Open dawiddrozdinfor opened 2 weeks ago

dawiddrozdinfor commented 2 weeks ago

Describe the bug When we put SohoAccordion component inside of SohoModalDialog, it has fixed width set to 300px instead of matching child component width.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://stackblitz.com/edit/ids-quick-start-1801-hkqya9?file=src%2Fapp%2Fmodal-btn%2Fmodal-btn.component.ts
  2. Click on Open Modal.
  3. Modal should appear.
  4. See that accordion inside modal has fixed width instead of matching child component width.

Expected behavior Accordion width should match child component width.

Version

Screenshots The problem is caused by style shown on the following screenshot. image

Additional context Team Infor WFM

tmcconechy commented 2 weeks ago

Took a brief look and we can probably change this to 100% or remove the rule was added arbitrarily on this issue https://github.com/infor-design/enterprise/pull/796

But of course you can use your own css to set the width

kwolentarski commented 2 weeks ago

@tmcconechy, due to how Angular wrapper is implemented (the .accordion is inside the soho-accordion.component), we don't have a possibility to set the width ourself without using ::ng-deep, which is not a best practice.

tmcconechy commented 2 weeks ago

Ok, I think we could add a class full-width for this. We cant just remove the width or it could break someone.