Flex 3 accordion component and rounded corners

accordionapache-flexrounded-corners

Im using the accordion component in Flex and cant seem to get the header to have rounded corners. The footer rounds no problem but the header remnains square, any suggestions?

Best Answer

Here's an in-depth example from Doug McCune showing how to customize the Accordion control, with accompanying source code and explanation, in which he does something similar. While the specifics will depend on what you're trying to do, essentially you need to re-skin the button and/or selection skins of the accordion-item header.

Skinning can be a bit tricky, one of those things that seems like it ought to be easier than it is (and personally I find using Flash for skinning to be a pain for all but the simplest situations; I much prefer to do it in code or markup), but if you spend a little time with the code in the example I'm sure you'll see what's going on and be able to apply to your project. Hope it helps -- good luck!

Related Solutions

Html – CSS3’s border-radius property and border-collapse:collapse don’t mix. How to use border-radius to create a collapsed table with rounded corners

I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything.

A workaround is to add border-spacing: 0 and leave the default border-collapse: separate on the table.

Html – Rounded corners on a fieldset

This site has a fix for the issues concerning fieldset rounded corners and IE10. There are still issues in IE (sad face). You have to float it to work 100% of the time.

fieldset {
  margin: 20px;
  padding: 0 10px 10px;
  border: 1px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 10px #666;
  padding-top: 10px;
}
legend {
  padding: 2px 4px;
  background: #fff;
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -20px;
}
fieldset > legend + * {
  clear: both;
}

<fieldset>
  <legend>Legend</legend>
</fieldset>

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/

Best Answer

Related Solutions

Html – CSS3’s border-radius property and border-collapse:collapse don’t mix. How to use border-radius to create a collapsed table with rounded corners

Html – Rounded corners on a fieldset

Related Topic