[Bug]: Collapsible looks/behaviour changed in version 2.0.3

[be-cobblestone]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

When switching from version 2.0.3-beta to version 2.0.3 the look of the collapsible component changed.

Current Behavior

Beta version 2.0.3 https://jsfiddle.net/Cobblestone42/dref9uzq/22/

• the header is not split over several rows (OK)
• no drop down arrow is shown at the right of the collapsible (Not OK)
• Good spacing between header and body when opening (OK)

Release version 2.0.3 https://jsfiddle.net/Cobblestone42/hs7b2nuq/12/

• Header is split over several rows (not OK)
• A dropdown array is shown at the right (OK)
• Bad spacing between header and body (not OK)

Expected behavior

• Not splitting the header over several rows
• A dropdown array at the right (maybe as an option?)
• good spacing between header and body as in the alpha version

Possible Solutions or Causes

I'm not a css or js developer, just a user. So no idea what causes this.

Steps to reproduce

I have created two fiddles showing the difference in behaviour and looks
Beta version https://jsfiddle.net/Cobblestone42/dref9uzq/22/
Release version https://jsfiddle.net/Cobblestone42/hs7b2nuq/12/

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Additional information you want to tell us:

[wuda-io]

Hello @be-cobblestone
Yes you are right, this was changed due to the transition from animejs to css only transitions.
I think it should be common to have no padding inside the div.

The solution for a padding is to place a div inside the collapsible-body and place a custom padding class inside.
We should update the docs accordingly.

[gselderslaghs]

I can confirm the layout issue and digged a bit deeper into this. From my opinion it would be an improvement working with additional div elements as @wuda-io suggested. I created an working example at CodePen: Materialize - Collapsible looks/behaviour

In this example I created an additional inner wrapper for the header and content area's, with classnames collapsible-header-content and collapsible-content-content, then I added additional CSS styling for those new elements and improved the after pseudo selector to have a width: auto and align-self: end CSS declaration

[gselderslaghs]

Created PR #544 to address this issue

[gselderslaghs]

I think it should be common to have no padding inside the div.
The solution for a padding is to place a div inside the collapsible-body and place a custom padding class inside. We should update the docs accordingly.

Exactly, I have removed the collapsible-content-wrappers from the Codepen example and pull-request as it turned out just using a p tag instead of a span is sufficient 😉, guess we'll have to update this in the documentation to avoid using additional wrappers and classes

I also noticed the icons where not compliant to Material standard as i've implemented the Material expand icon as wel in the collapsible header in the pull request

[gselderslaghs]

This has been addressed in v2.2.1
Please update the collapsible header html with inner content wrapper as following:

<div class="collapsible-header">
    <i class="material-icons">add</i>
    <div class="collapsible-header-content">
        Title
    </div>
</div>

@be-cobblestone can you confirm the latest version fixes your issue? Propose to close this issue