You need to sign in to do that
Don't have an account?
Ugly jQuery Accordion in Visualforce with standard stylesheets
I'm trying to incorporate a jQuery Accordion (http://jqueryui.com/demos/accordion/) in a Visualforce page but it comes out garbled (see screenshot):
If I remove the standard stylesheets (standardstylesheets="false") and header (showheader="false") it comes out as I'd want it to (see screenshot):
Problem is, I have other things on the page that needs the standard stylesheets.
How would I define the accordion so that it plays nice inside of a standard stylesheets Visualforce page?
I'm thinking I need to override some styles, but I can't figure out what/how.
Here's a short version of the page with just the accordion part:
<apex:page cache="false" expires="0" sidebar="false" > <apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-1.7.1.min.js')}" /> <apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-ui-1.8.18.custom.min.js')}" /> <apex:stylesheet value="{!URLFOR($Resource.jquery, '/css/ui-lightness/jquery-ui-1.8.18.custom.css')}" /> <script> $j = jQuery.noConflict(); $j(document).ready(function($) { $j("#SFDCSalesPanel").accordion(); }); </script> <apex:pageBlock id="playBlock" > <div id="SFDCSalesPanel"> <h3><a href="#">Header 1</a></h3> <div>Content 1</div> <h3><a href="#">Header 2</a></h3> <div>Content 2</div> <h3><a href="#">Header 3</a></h3> <div>Content 3</div> </div> </apex:pageBlock> </apex:page>
I figured out how to fix this today by using Google Chrome's built-in "Inspect Element" function.
Basically, I went through and deactivated style after style until I found it.
Apparently, the H3 tag had "display:inline" set - when changing this to "display:inline" the accordion looked beautiful.
Here's an updated, working, version of the above code:
All Answers
Hi Johan
You could try this on the h3 tag
And this on the div
If I remember correctly this worked when I did something similar with accordion. Of course you can play with the px size if the font is too small or big.
Hope it helps
Thanks for the tip - unfortunately it didn't help.
I figured out how to fix this today by using Google Chrome's built-in "Inspect Element" function.
Basically, I went through and deactivated style after style until I found it.
Apparently, the H3 tag had "display:inline" set - when changing this to "display:inline" the accordion looked beautiful.
Here's an updated, working, version of the above code: