New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
cautionbug opened this Issue Jul 18, 2013 · 3 comments

Comments

Projects
None yet
3 participants
@cautionbug

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jul 18, 2013

Contributor

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.

Contributor

gabrielschulhof commented Jul 18, 2013

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

This comment has been minimized.

Show comment
Hide comment
@cautionbug

cautionbug Jul 19, 2013

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.

2013-07-19_0857
2013-07-19_0900
2013-07-19_0902
2013-07-19_0903
2013-07-19_0916
2013-07-19_0917

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.

2013-07-19_0857
2013-07-19_0900
2013-07-19_0902
2013-07-19_0903
2013-07-19_0916
2013-07-19_0917

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment