Styling for accordion headers - stack view

[siddharth1903]

Hi,
Using CDS Core Accordion, i would like to achieve a behaviour where in small screens, we would like to have the whole of the header in one line, while the text inside wraps within the space on offer.

The default behavior wraps the whole of the content next to the icon to the next line... Have attached an image of the storybook/foundation as actual..Please refer Panel 3

Actual:

Expected:

From what i have seen, setting flex-wrap to no wrap on the private content inside of the shadow root solves this.. But i would like to know what is the best way to achieve this...

Thanks in advance,
Sid

[bbogdanov]

Hi @siddharth1903,

What you are doing seems like a good solution.

@coryrylan Do you think it will be a good idea to export a css prop for the flex-wrap so people don't have to change the shadow-dom for future situations like the mentioned above?

[mathisscott]

That or we could update the flex-wrap property responsively based on a media query in the CSS...

[siddharth1903]

@mathisscott is there a problem applying no wrap on all breakpoints? I dont think it is going to be so much of a problem in cases where there is more width on offer! And even in that case, i believe no wrap could work better for consistency?

[coryrylan]

I think the fix here would be to add wrap:none to the cds-layout on this line. That would allow the projected content to wrap but prevent the content from wrapping past the icon

[siddharth1903]

@coryrylan @bbogdanov should i create a defect out of this discussion? or will you guys take it up for an upcoming release! Do let me know what works best

[bbogdanov]

#6345

[bbogdanov]

Merged!