Question

I need to make a collapsible set in which each panel contains a checkbox controlgroup (non-inset).

Any ideas how to do this without a dirty CSS hack?

Answer 1

Sorry just noticed the non-inset part! It’s not some *margin ie7 hacking! But to get them all to be 100% width, etc, you need to go against the original padding / margins they give elements after they are created. Set these few rules for the collapsible area & the fieldset of checkboxes below it, and you’ll be all set.

jsFiddle DEMO

.ui-collapsible-contain {
    margin : 8px -15px;
}

.ui-collapsible-contain fieldset { 
    margin: 0 -15px 0;
}
.ui-collapsible-heading a span.ui-btn { 
    margin-left:6px;
}
.ui-collapsible-heading a .ui-btn-inner {
    padding-left: 46px;
}
​