question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issues with Accordion styling

See original GitHub issue

Im trying to use PF4’s Accordion but Im facing a few issues

  • every AccordionToggle is wrapped in heading (h1-h6, which can be configured) - I dont want that, I cannot even pass a custom className to the heading. It seems to me that this wrapping inside heading tag is unnecessary. If i’d like to use heading tag I can specify it as
<AccordionToggle ... >
  <h3>...</h3>
</AccordionToggle>
  • adding custom classes to AccordionToggle’s button element via passing className such as
<AccordionToggle className="my-custom-classname" >

to change the default padding/border but Im not able to do so as applied class .pf-c-accordion .pf-c-accordion__toggle has precedence.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:12 (12 by maintainers)

github_iconTop GitHub Comments

1reaction
rachael-phillipscommented, Aug 14, 2019

@mcoker I placed a P2 on this issue because it is not blocking. Feel free to review and correct if needed.

0reactions
rachael-phillipscommented, Sep 5, 2019

@rawagner do you have any follow up questions here or did @redallen 's answers help you out?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Accordion css style is broken
Hello, Since the last update the formatting of the accordions seems to be broken and reset back to the default formatting.
Read more >
Problems styling MaterialUI Accordion heading - css
im having problems with the styling in my Accordion Heading. I set my Accordion Contents like this: <Accordion heading1= { <DishItem name=" ...
Read more >
Accordion Design: UI Best Practices & Examples
An accordion is a menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click).
Read more >
Accordion styling issue: · Issue #3685 · vmware/clarity
When the last panel of a accordion is expanded, the bottom corners of the panel are still rounded. And it seems that there...
Read more >
Accessible Accordion - examples and best practices - Aditus
Learn how to create accessible accordion components with practical examples and code samples.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found