[Accordion] Its `.content` and `.title` classes shouldn’t override the corresponding classes of nested components.

[dmaison]

Steps to Reproduce

1. Create accordion
2. Add header inside accordion

Expected The header should be formatted correctly

Result The inherent accordion style interferes with the formatting of the header

Testcase http://jsfiddle.net/p9L4c6Lh/1/

[Darkesthour]

Hello. But why do you use <div class="content"/> inside <h2 class="ui dividing header"/>? It works perfectly without this extra-container (it's because content class has a special purpose inside <div class="ui accordion"/>).

[BitForger]

to sum up @Darkesthour explanation.. remove the div.content sitting inside the dividing header.

[dmaison]

@Cyb3rWarri0r8 @Darkesthour, this solution doesn't account for adding sub headers, or even any other type of semantic style group that can utilize a content class.

The way I see it, specific styles shouldn't conflict with other styles in semantic. Changing the style for accordion content from .ui.accordion .content to .ui.accordion > .content would prevent any foreseeable conflicting issues.

[BitForger]

@dmaison Well there is the ability to override that if you want to... I haven't tried this, but for things that say to have a div.content have you tried just using it without the content wrapper?

[Unsfer]

One more appropriate testcase, this time with Floated List: http://jsfiddle.net/fseb296h/

And in my case I can't just remove "content" class, because I'm using Semantic-UI-React. I also think, that .ui.accordion > .content will be just fine

[awgv]

The search component seems to be affected as well: #5330.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[attaboyer-dev]

I've recently encountered this by using the <Message.List /> component within a stylized accordion in Semantic-Ui-React.

The suggested .ui.accordion > .content referenced by @dmaison was able to resolve my issue, however, it still seems inappropriate for the accordion content to clash with other components as a default behavior.

[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/gvmwj4na/2/