Collapsible-set first-child border-top missing #6188

cautionbug · 2013-07-18T20:53:33Z

Didn't find a match for this searching pretty broadly ("collapsible border"):

v1.3.1, CSS
In a collapsible-set, the top border of the first collapsible is missing its border. i tracked it down to the generated button that toggles the collapsible. Using Firebug, the last applied border-top rule is this:

.ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {
    border-top-width: 0;
}

If i disable that rule, the border is restored, but it affects other collapsible widgets.

i added this rule in Firebug and it overrode the above for only the first collapsible (collapsed and expanded), restored the border, and left the other collapsibles in the set alone:

.ui-collapsible-set .ui-collapsible.ui-first-child .ui-collapsible-heading .ui-btn {
    border-top-width: 1px;
}

Hopefully it wasn't just an errant piece of code on my part, but there wasn't anything particularly weird about my HTML structure.

gabrielschulhof · 2013-07-18T21:00:32Z

Can you please create an example illustrating the problem in our jsbin template which contains the latest JS and CSS for jQuery Mobile as per our contributing guidelines? If you cannot reproduce it there, the issue has most likely already been fixed.

cautionbug · 2013-07-19T13:25:49Z

Unfortunately, i can't reproduce it in this JSBin: http://jsbin.com/ofuhaw/48/edit

i did, however, discover a similar CSS issue in Collapsibles that are not in a set. See the JSBin. The nested Collapsible-Set appears to work as intended. However, the bin template uses code directly from github, and i can't get my CSS to load & generate the widgets in the template.

On the other hand, if i link to the Github CSS on my page, some of the layout is screwy but the widgets generate - and the issue i described persists. i'm attaching some screenshots to demonstrate.

i understand it's difficult to track down IF it's a real issue with these discrepancies, but since my CSS files won't load the widget correctly on JSBin, and there's no perma-linked ThemeRoller CSS to use instead, this is the best i can come up with. All i know is, the above rule i added fixes the nested Collapsible-Set for me, though it doesn't fix the other Collapsible border-top-width issue i discovered in the process.