Search code examples
javascriptpaddingmaterialize

Materialize collapsible body padding change after opening

I want to change the materialize collapsible-body padding to 3px. It works at first but if you open, close and then reopen the collapsible padding will reset to default and will not be 3px anymore.

Can you tell me how to prevent this?

Here is a codepen showing the problem: https://codepen.io/jbeausej/pen/yLyrOow

Thank you!

Here is my code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>Document</title>
</head>
<body>    
    <div class="container">
        <div class="row">
            <div class="col s6 m6 l6 x6" >
                <div class="col-content card-panel z-depth-2 round-small" style="padding-top: 15px;">
                    <ul class="collapsible">
                        <li>
                          <div class="collapsible-header" style="padding:4px 4px 4px 8px;">Collapsible title</div>
                          <div class="collapsible-body" style="padding:3px;"><span>Collapsible body content.</span></div>
                        </li>               
                    </ul>                    
                </div>                
            </div>
        </div>
    </div>
</body>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems);
  });
</script>

</html>
Solution

  • Instead of inline styling, create a CSS rule:

    .collapsible .collapsible-body{
  padding:3px;
}

    Demo:https://codepen.io/lotusgodkk/pen/JjoVXLX

    The inline style is removed when the container is animated for opening or closing.