Accordion bug #164

Closed
cvanhasselt opened this Issue Mar 29, 2013 · 7 comments

Projects

None yet

4 participants

@cvanhasselt

Working with jQuery accordion code, I cam across a CSS bug with sortable accordions in both IE and Chrome. The triangle toggle to unfold an accordion section is overwriting the section title text. I fixed this for my purposes in the jquery-ui-1.10.0.custom.css file as follows, changing from ...

.ui-accordion .ui-accordion-header a {
display: block;
font-size: 1em;
padding: .5em .5em .5em 1.7em;
}
.ui-accordion-icons .ui-accordion-header a {
padding-left: 2.2em;
}

... to this ...

.ui-accordion .ui-accordion-header a, .ui-accordion .ui-accordion-header {
display: block;
font-size: 1em;
padding: .5em .5em .5em 1.7em;
}
.ui-accordion-icons .ui-accordion-header a, .ui-accordion .ui-accordion-header {
padding-left: 2.2em;
}

Happy to provide screenshots if you want, and specific code of what I was doing. This worked for me, but perhaps should be incorporated in upcoming build.

@gtraxx
Member
gtraxx commented Mar 29, 2013

Hi :) I'll check
Thank you for your contribution

@Heliosmaster

I can't reproduce the problem.

This is now my accordion function in ./assets/js/demo.js (which is the js that shows up in the demo of the project)

$("#menu-collapse")
        .accordion({
            header: "h3"    
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function( event, ui ) {
              // IE doesn't register the blur when sorting
              // so trigger focusout handlers to remove .ui-state-focus
              ui.item.children( "h3" ).triggerHandler( "focusout" );
            }
        });

and I don't see the overlap:

Selection_002

From chrome:version

Google Chrome 27.0.1453.12 (Official Build 191631) dev

@cvanhasselt
body{font-size:10pt;font-family:arial,sans-serif;background-color:#ffffff;color:black;}p{margin:0px;}

Well if i get a chance I'll send you a screenshot. I'll check my code as well. ThxChris-----Original Message-----
From: Davide Taviani Sent: Apr 14, 2013 11:02 AM
To: addyosmani/jquery-ui-bootstrap Cc: Chris van Hasselt Subject: Re: [jquery-ui-bootstrap] Accordion bug (#164)

I can't reproduce the problem.

This is now my accordion function in ./assets/js/demo.js (which is the js that shows up in the demo of the project)

$("#menu-collapse")
        .accordion({
            header: "h3"    
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function( event, ui ) {
              // IE doesn't register the blur when sorting
              // so trigger focusout handlers to remove .ui-state-focus
              ui.item.children( "h3" ).triggerHandler( "focusout" );
            }
        });

and I don't see the overlap:

From chrome:version

Google Chrome 27.0.1453.12 (Official Build 191631) dev

—Reply to this email directly or view it on GitHub.

@gtraxx
Member
gtraxx commented Apr 16, 2013

Hi,
Do you have a screenshot?

@gtraxx
Member
gtraxx commented Apr 16, 2013

You use the latest version from repository ?
I can not reproduce the bug with chrome :)

@gtraxx gtraxx was assigned Apr 16, 2013
@rock-weld

I had the same problem with Chrome.
The fix worked for me. Thanks

@gtraxx
Member
gtraxx commented Jun 3, 2013

The bug is fixed ?

@gtraxx gtraxx closed this Sep 16, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment