search

Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.06k stars 4.95k forks source link

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

Open dmaison opened 7 years ago

dmaison commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

dmaison commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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

stale[bot] commented 6 years ago

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 commented 5 years ago

I've recently encountered this by using the 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 commented 2 years ago

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/