Message padding in accordion not right.

[lery12]

When i build:

<div id="root"></div>

<div class="ui styled accordion">
  <div class="active title">
    <i class="dropdown icon"></i>
    A
  </div>
  <div class="active content">
    <div class="ui message">
      message
    </div>
    <div class="ui message">
      <div class="content">message</div>
    </div>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
   B
  </div>
  <div class="content">
    <p></p>
  </div>
</div>

Expected Result Both messages have the same padding in the accordion.

Actual Result first messages has normal padding, while second has more padding. This might also cause problems in: Cards, Headers etc...

Version see: https://codepen.io/Traverse/pen/gWavdQ

[y0hami]

The second message component has <div class="content">message</div> inside instead of just message like the first one

[traverse]

@hammy2899 There are cases where a message has a content div but the accordion styling shouldn't be of any influence to the styling of that, that's the problem here.

Example:

<div class="ui icon message">
  <i class="inbox icon"></i>
  <div class="content">
    <div class="header">
      Have you heard about our mailing list?
    </div>
    <p>Get the best news in your e-mail every day.</p>
  </div>
</div>

The issue is the following style:

.ui.styled.accordion .content,
.ui.styled.accordion .accordion .content {
  margin: 0em;
  padding: 0.5em 1em 1.5em;
}

This applies it to anything with a content class within an accordion which isn't really what you want. You'd want the following.

.ui.styled.accordion > .content,
.ui.styled.accordion .accordion > .content {
  margin: 0em;
  padding: 0.5em 1em 1.5em;
}

[lubber-de]

Fixed in the community fork Fomantic-UI by https://github.com/fomantic/Fomantic-UI/pull/2197 See your adjusted jsfiddle here https://jsfiddle.net/lubber/yes1o0qh/1/