jQueryUI accordion causes wrapping when using the icon
Using the baic redmond theme from jQueryUI, my accordians are not sitting right. I thought something in my stylesheet was causing issues, but I removed it and it is still funky. I stripped it way, way back to this and it's still wrapping the triangle icon and text on 2 x lines.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nodes</title>
<link rel="stylesheet" type="text/css" href="/DFCx/css/jQueryUI_redmond/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="/DFCx/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/DFCx/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/DFCx/js/page/Nodes/view.js"></script>
</head>
<body>
<div id="accordion" class="accordion">
<h3>Title</h3>
<div>junk</div>
<h3>Title</h3>
<div>junk</div>
<h3>Title</h3>
<div>junk</div>
<h3>Title</h3>
<div>junk</div>
</div>
</body>
</html>
The accordion script (view.js) just has:
$( "#accordion"开发者_如何转开发 ).accordion({
autoHeight: false,
collapsible: true,
header: 'h3'
});
The accordion works perfectly, opens, closes, fits and so forth, it just wraps the h3 when it puts the icon in place!
see http://i.imgur.com/1fwD2.png for a screenshot sample of the result
When I use "icons: false" in the accordion config it leaves the icons off and works as expected, but I'd like to have them there! Tried different UI stylesheets (overcast etc.) and all the same problem in different colours.
Is there something I'm missing?
-- update (not sure if it's a solution yet tho) In the jQueryUI css file was this line:
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
which I edited to be
.ui-icon { display: block; float: left; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
(note added float:left;)
This has fixed the icon positioning in the headings, and works a treat. Fingers crossed that it doesn't have any nasty flow-on affects for other icons :(
Your titles should be wrapped in an <a> tag as well:
<h3><a href="#">Title</a></h3>
I have the same issue, and I used this to correct it:
/* correct accordion headers*/
.ui-accordion-header span{ position: absolute; }
.ui-accordion-header a { margin-left: 20px; }
It may be that the generated CSS you're using does not include styles for accordions.
Try to use a different CSS, for example, this one: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css.
Or, choose the theme you are using from this page: http://blog.jqueryui.com/2010/09/jquery-ui-1-8-5/.
You still need to ensure you style the accordion headers as documented (and suggested by Larry):
<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>
What worked for me is the combined solution by @ton and @LarryLustig.
Your titles should be wrapped in an
<a><h3><a href="#">Title</a></h3>Style in page
.ui-accordion-header span{ position: absolute; } .ui-accordion-header a { margin-left: 20px; }
加载中,请稍侯......
精彩评论