Accordion Styling (JavaFX 2.1)

Hi there,
I struggle with styling the title of a TitledPane in an Accordion menu:
the following code used to work in JavaFX 2.0 when the pane is expanded(no matter of wheter the focus is gained or lost)
.titled-pane:expanded .title {
    -fx-base: #555555;
    -fx-text-fill: white;
}in JavaFX 2.1 I don't get the same result...(if the pane loses the focus the text is not white anymore)
Same thing for positioning the Label of the TitledPane...in 2.0.2 I used:
.titled-pane .title {
    -fx-alignment: center;
    -fx-cursor: "hand";
    -fx-focus-color: #555555;
    -fx-font-size: 12pt;
    -fx-font-weight: bold;
    -fx-text-fill: black;
}in 2.1 , the -fx-alignment no longer does the job...
Is it a bug? or the styling has changed in 2.1?
Edited by: alabala on 2012-2-20 6:50

Setting the CSS for the .titled-pane class affects not only the Label, but also the contents of the panes:
.titled-pane {
-fx-text-fill: white;
}In my case the TitledPanes contain ListViews with Labeled items). In result each of labels becomes white in color....
I would like to style only the Label of the TitledPane...that's why I'm using the following CSS;
.titled-pane:expanded > .title {
-fx-base: #555555;
-fx-text-fill: white;
}and this is not working(the Label of the pane is not colored in white, when the pane is expanded and not focused)
...seems like a bug to me...
Am I missing something?
Edited by: alabala on 2012-2-21 5:17

Similar Messages

Problems with Accordion styling

I'm quite new to the use of both Spry and CSS but fancied
having ago at setting up the accordion widget for my company's
revamped website - www.update.dcprint.co.uk
This works fine in IE7 Beta3 (I know, but couldn't resist
having a look at the app) but falls over in Firefox/Safari where
the tabs gain extra height for some reason. The CSS is embedded for
ease at the mo, but will be extracted to a seperate file once my MD
is happy with the design. To save me a lot of time does anyone have
an idea what causes this?

Sorry kimblas, you are quite right! That'll teach me not to
jump in without reading the comments :) OK, make a few changes
suggested by Steve, and played around with the css as per the
example (I think). It now works fine in Firefox if a little slow
(I'm assuming this is to do with the Flash movie and my painfully
old PC) but in IE7 it still wants to display the whole of the
selected content prior to the animation. Interestingily this wasn't
the case until I began to tinker to the recommended settings.
Unfortunately I can't get back to where it was to suss out what
code sorted it, nothing now seems to make a difference. Any
ideas?

Accordion navigation bar styling.

Hi,
I'm wondering if it is possible to create a one page website which includes a "metro style" accordion navigation bar that holds the content for the website within each tab?
I know this is possible within jquery/css etc but would like to build it in muse if possible. The idea is that the landing page will consist of one image filling the entire screen with a "metro tabbed" style navigation bar and I would like the content to be animated and slide down/or across the page into view?

Hello,
In Muse you can only either use the usual menu bar from the menus widgets or you may also use the normal accordion panel which again is provided in the widgets panel. For your specifc requirement, as you have quoted correctly, you'll need to insert some CSS etc. in Muse using the Object -> Insert HTML option.
Cheers
Parikshit

How to view the source code of JavaFx component ?

Hi everybody,
I just want to know if it's possible to view the source code of the component Button (from JavaFx) and how to do it ?
In fact, I don't really understand if JavaFx is entirely open source ?
Thanks.

I lack time right now to experiment, but I think you can get your goal just with CSS.
Here are the variables I found for Button:
Button
borderFill: class javafx.scene.paint.Paint = (null)
button: class javafx.scene.control.Button = Button
colorBrightness: Float = 0.8156863
cornerRadius: Float = 7.0
fill: class javafx.scene.paint.Paint = (null)
focusFill: class javafx.scene.paint.Paint = javafx.scene.paint.Color[red=0,green=147,blue=255,opacity=1.0]
focusSize: Float = 1.4
highlightFill: class javafx.scene.paint.Paint = (null)
label: class javafx.scene.control.Label = LabeledImpl [id=-Label]
paddingBottom: Float = 4.0
paddingLeft: Float = 10.0
paddingRight: Float = 10.0
paddingTop: Float = 4.0
shadowFill: class javafx.scene.paint.Paint = (null)
textFill: class javafx.scene.paint.Paint = (null)
textFont: class javafx.scene.text.Font = Font[name=Verdana, family=Verdana, style=, size=11.0]Try changing cornerRadius and focusFill/highlightFill, etc. Note that some discovered properties are not affected by CSS... Perhaps that's why there isn't an official doc about CSS styling currently.

On differences between JavaFX CSS and the w3c standard css

This is a discussion topic which came to mind after reading comments in this thread Re: FXML, css and -fx-font-family
Feel free to comment or share your thoughts on the topic.
Note that these comments relate to the naming and semantic meanings of css tags, and not the syntax and parsing of css (as both w3c css and javaFX css seem to be equivalent in the later regard).
You know, sometimes I find JavaFX's lack of certain css features refreshing. It is nice to have all, well, almost all, of the JavaFX CSS documented on one page. I think if you were to do the same thing for w3c css then it would end up with a much larger, more difficult to understand document and even what the contents of that document should be would probably be pretty controversial, in the same kind of way that the HTML5 specification ended up being. Microsoft contributed over 7000 tests to w3c just to cover only a subset of the css rules available in browsers today. The webkit project lists almost a thousand open CSS bugs: https://bugs.webkit.org/buglist.cgi?product=WebKit&component=CSS&resolution=---. So implementing even partial w3c CSS support is a complex project.
When I first started using JavaFX CSS I found the differences to w3c CSS quite jarring, and it was hard to account for them. Now that I am used to JavaFX CSS, I don't have as much of an issue. The difference in names and semantics is going to be an impediment to designers working on JavaFX who are familar with w3c CSS - but the designers will quickly also discover that FXML is not HTML and Java is not JavaScript and JavaFX deployment is not HTML deployment. So, perhaps, in the larger picture, it is not as big a deal as it would seem. Still, one can't help think that any impediment to people easily picking up and adopting JavaFX is doing the technology a disservice.
There are other advantages in having the JavaFX CSS in it's own namespace to w3c css, in that it can evolve seperately, it is not expected to be exactly the same because it has a different name, it is not expected to fully implement w3c css as browsers do because it's clearly a different thing by name, etc. There is even precedent for it in the use by mozilla of moz- CSS prefixes and webkit css properties http://css-infos.net/properties/webkit - the web as not as standard as a lot of people propose. JavaFX CSS is backing a JavaFX rendering engine and not an HTML rendering engine. It is quite remarkable that Oracle was able to build and make available a CSS model for JavaFX that feels as familar as it does to w3c css, as w3c css is targeted very strongly toward styling a completely different technology set (HTML markup and document object model).
It would be useful to have a tool which translates w3c css to approximations of JavaFX css and vice versa, or the ability for JavaFX to have a mode (perhaps a boolean value when a stylesheet is loaded) to perform an automatic alias or mapping of w3c css to javafx (at least for the subset of w3c css which would make sense to automatically translate to JavaFX css). I haven't checked the JavaFX jira in detail, so perhaps a request for such support already exists - perhaps it is under the private http://javafx-jira.kenai.com/browse/RT-9272 jira.
The JavaFX css model is really powerful and I have found really useful some of the additions that it adds above the baseline 2.1 css that is found consistently in browsers. With the upcoming Java CSS object model http://javafx-jira.kenai.com/browse/RT-17293, you will also get better programmatic access from Java.
So, nice work on building and implementing this complex feature . . .

Thanks for the feedback. Closing the gap between JavaFX CSS and W3C CSS will be an evolutionary process. It would be nice to use a standard's based stylesheet but there is not always a 1-1 mapping to JavaFX. But for those properties that can be mapped, it is something that should be supported. For example, we should be able to handle "font" or "-fx-font".
I have made http://javafx-jira.kenai.com/browse/RT-9272 public.

Spry Accordion Menu Tab Link css - totally confused

Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Photo Gallery</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="PhotoGallery.html">Gallery 1</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Unit Newsletters</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="Newsletter.html">February 2010</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Forms</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="">Joining Instructions</a></li>
    <li><a href="">Enrolment</a></li>
    <li><a href="">Next of Kin</a></li>
    <li><a href="">Volunteer Blue Card</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="WhatsOn.html">Whats On</a></li>
    <li><a href="PSG.html">Parent Support Group</a></li>
    </ul>
    </div>
    </div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;

Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;

Adding dynamic content to accordion panels

Hello,
and thank you in advance for any help.
I need to make a new web page for my girlfriend. She's a
photographer which means she needs to update her page pretty often.
The usual small systems however were way too complicated for her.
After seeing Spry, I decided to use it, along with Relay
which gives an easy option for updating content. So here's my plan:
- I install Relay so she has sort of a back-end to update her
pictures.
- I have a php script which reads out the directories and
makes an xml file to use with spry.
However I find it very difficult to understand how I should
use this xml file. Additionally, she wants to have the accordion
panels, so I have to put the code (probably the same code with only
a different xml filename for each directory) into every panel.
Could anybody help me with that? Please note that I haven't
started anything yet and am right now trying stuff locally.
Thank you again.
Mete

Hello again,
I'll try to describe the case once again, this time more
clearly:
- I will install Relay onmy server to enable uploading
pictures. Relay stores the upload pictures in different directories
which are created by the user and the path to each directory is
known.
- A PHP-Script reads out the content of these directories
(names, paths etc) and gives a list as an XML-File.
What I want to do is:
Make an HTML-Page and use Spry Accordion Panels in it.
Let's say I have 5 panels. Each panel (in itself) shall use
the XML-file (one file per directory) to display the pictures. The
styling will be made by using the CSS.
My problem is:
I just can not figure out how to use the regions etc in Spry.
I have to admit that so easy it is to use, it 's also pretty
difficult to understand the logic behind it for non-skilled users
(especially for those who do not have Dreamweaver etc). I can't
find the answers to my questions like: Why do the datasets get the
prefix "dsXXXX"?
I only want to read the XML-File and display these pictures
in an Accordion Panel without floating, which means it has to
scroll left and right.
I hope this makes it easier to understand :)
Thank you once again!
Mete

How to use HTML in JavaFX controls?

Does JavaFX support using HTML in JavaFX controls' text? For example, in Swing components:
button = new JButton("<html><font face=arial size=16><center><b><u>E</u>nable</b></font><br>"
+ "<font face=cambria size=12 color=#ffffdd>middle button</font></html>");
If no, could we find a workaround?

Embedding a WebView in a Labeled for HTML Rendering
A WebView is a node which displays HTML.
Most controls implement Labeled, or have elements that are Labeled.
A Labeled has a setGraphic(node) method which allows you to set the graphic attached to the labeled to any given node (including a WebView).
For instance:
WebView webview = new WebView();
webview.getEngine().loadContent("<html><font face=arial size=16><center><b><u>E</u>nable</b></font><br><font face=cambria size=12 color=#ffffdd>middle button</font></html>");
webview.setPrefSize(150, 50);
Button buttonWithHTML = new Button("", webview);
should create a button with html in it (I didn't actually try running the above example).
Apart from the relatively slow startup time on first use and the overhead (which I can't quantify) of using WebView in this way, there are a couple of jira requests outstanding which make it a little bit of a nuisance.
RT-25004 Allow for transparent backgrounds in WebView
RT-25005 Automatic preferred sizing for WebView
You can vote for the above jira requests or comment on them if such functionality is important to you.
TextFlow/FXML/CSS Alternative
Rather than using html in the Labeled, support for the TextFlow control was introduced in Java 8, so that could be used instead.
TextFlow also works well with FXML and css if you prefer to have the stuff in the TextFlow managed via markup and a declarative styling language.
Open Feature Request
There is an open feature request RT-2160 HTML support for text which is currently scheduled for implementation in the initial Java 8 release. I think the likelihood of it actually being included there is zero percent, though it may be considered for a future release. You can vote for the issue or add comments to it, or provide an implementation if you are so inclined.
Implementation Considerations
A possible implementation would be something which parses the HTML then constructs a TextFlow the parsed HTML according to processing rules which are laid out in laborious mind-numbing detail in the HTML5 spec.
You could use a relaxed HTML parser such as the validator.nu parser (though there may be others which would be a better fit).
A simple implementation would just be to use the parser in the jdk which is used for the swing controls, but that is hopelessly outdated.
Perhaps, even simpler would to only accept strict html input and just use SAX to parse it out, though things like validator.nu are too difficult to work with.
Then, for the limited number of parsed tags that you want to support (and you really don't want to support all of HTML5 for something like this - otherwise you would just use WebView), create your TextFlow from the DOM model that your parser has created.
I wouldn't even both trying to handle most of the stuff in your html string in your implementation, stuff to do with styling, fonts, colors, etc. Those things were never any good in html anyway, and css is better for handling them, so just support stuff commonly used in usual modern day html (take a look at bootstrap html source as an example to see what that might be - if bootstrap doesn't use it, I don't think you should support it). The stuff you will be supporting are things around document structure like lists, headings, etc. div blocks and span nodes - so only implement that important stuff and delegate everything else to css where it belongs.
Also make sure your implementation fits in with FXML so that you can easily embed your html subset in an FXML doc.

Spry Accordion Widget hiccups and more

Hi, I am using the Spry Accordion Widget on my website and have the following problems:
1. Is there a way for the accordion movement not to affect the images that are placed below it. For example, I have the accordion placed on top of 3 different logos. Whenever, the accordion panels move up and down (in use) all the contents (below the accordion) moves with it. I don't want the logos to move up and down whenever someone clicks on the panels. How do I make the logos stationary so its placements won't change?
I don't want to use an ap div tag because that would force my website to be in a fix position on a page. All I have been using to position my graphics are div tags and floats; no ap div tags. If you resize the browser window you will see that my website is somewhat elastic. Meaning, the graphics are always in the center of the page regardless of the size of the browser window—this is something I want to keep.
Please go here for better understanding: http://meinaco.net/tblLists.html
2. When one of the accordion tab is clicked there seems to be some kind of hiccup/jump/jerky (up and down movement) before it settles/stops. Is there a way to fix that? I noticed the accordion moves up and down smoothly prior to my inserting the images into the tab panels. To be clear, the images I am referring to are the brown horizontal lines with white words on a green background. Do these images have anything to do with this problem?
3. When the 1st tab (the restaurant panel) is open and another tab is selected, the restaurant panel displays large incorrectly styled text for a brief second as it closes to allow the other panel to open. I know it has something to do with my style sheet but I can't figure out what is causing it. I checked my css files and it seems they all have the correct size. To see this problem reoccur please do the following:
Make sure the restaurant panel is open then click on another panel (one of the 3 panels). As you click on the second panel pay attention to the text that sits inside the restaurant panel. You will see that large minus leading text will appear for a split second.
4. When I run my webpage (url mentioned above) on Safari 4.0.3 there seems to be a blue line outlining the whole accordion widget. This outline doesn't exist on Firefox nor on Opera. Please see attached image for clarity.
Any suggestions or help on any of these problems is greatly appreciated! Thank you in advance.
Meina
I hope someone can help me resolve or give me suggestions for the 1st and 2nd problems at the very least.

<div class="AccordionPanelContent">Castaway the: Restaurant<br />
              1250 Harvard Rd.<br />
              Burbank, CA 91501<br />
              - www.castawayrestaurant.com - (818) 848-6691</p>
Oops!
Missing the opening <p>
I didn't find it, the validator did.
Martin

Accordion Height Issue

I have apage I am working on and testing the Spry and various
elements on...
http://www.tommylogic.com/web-design/
I have the tabs opening fine now and all styled like I want
it. The issue I am having is on 3 items:
- When I first try to open and close the panels, the first
click never opens it. Only after the 2nd or thrird click or tab
that I click on.
- When they do open, they open in consistent heights,
sometimes with a scrollbar, sometimes not.
-Then when I get one open it wont always show all the
content in that particular panel <div>.
- If I close specific panel that is open first, then open
the new panel, it seems to do a bit better, but not always the
same.
I am passing it through like this
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
var acc8 = new Spry.Widget.Accordion("Accordion1", {
useFixedPanelHeights: false, defaultPanel: -1 });
All the heights are cleared in the CSS as well.
Any clues?
//////////////////////// resolution
removed extra line and changed var to Accordion1
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
useFixedPanelHeights: false, defaultPanel: -1 });
and some minor css tweaks in there as well.
Thanks Anyway... -T

Wrap the Accordion in a VBox and you should be all set.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();">
<mx:Script>
    <![CDATA[
      import mx.containers.VBox;
      private function init():void{
        for(var a:uint=0;a<100;a++){
          var vb:VBox = new VBox();
          vb.label = "MyVBox" + a;
          vb.width = 200;
          vb.height = 100;
          acc.addChild(vb);
    ]]>
</mx:Script>
<mx:HDividedBox width="100%" height="100%">
    <mx:VBox width="50%" height="100%"/>
    <mx:VDividedBox width="50%" height="100%">
      <mx:VBox width="100%" height="50%"/>
      <mx:VBox width="100%" height="50%">
        <mx:Accordion id="acc" width="100%" height="50%"/>
      </mx:VBox>
    </mx:VDividedBox>
</mx:HDividedBox>
</mx:Application>
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

Accordion effect, need help...

Heya,
So I want to create an extremely simple accordion effect. I
tried styling the default accordion component but I couldn't remove
the Halo styling to it, so unless someone can tell me how to do
that I'm looking for basic AS to show and hide a particular MC on
click. Anyone help?
Thanks!

Hi Spencer,
Getting away from halo (something I've been working at for
the last three days) isn't simple, but it's definitely doable.
First, I followed the instructions in Flash help on *creating
a new theme.* As part of those instructions, you'll copy two files:
default.as and AccordionHeaderSkin.as. Through trial and error, you
can fiddle with these two files and pretty much completely define
your own colors, fonts, etc. for all components. I changed my open
header to a gradient, and the closed headers to a different
gradient. It has worked much better and more reliably than using
the getStyle approach.
Search for "theme" and "styles" in help, and follow the
instructions--they worked for me.
But once you get it all hooked up properly and can see your
changes when you Publish Preview your movie, don't freak out if you
make changes to the .as files that don't show up right away. I
found I had to close Flash and open again before most changes
appeared.
Good luck!

Accordion Menu - Submenu position issue

Hello,
I've created an accordion menu that resides in the top right corner of my website. I seem to be getting various undesired results when previewing the site.
Desired layout: Build mode
Undesired Result: Page Preview
Undesired Result: Site Preview
The top level sites work fine but when I move the submenu to the left of the menu using the X position, then preview the page or site, the submenus show up either right over the menu or way off to the left of the site, almost completely off the page. I have no idea why, please help.
Jeff

Hi Sanjit, thank you for your reply.
The first image is a from the Design View, the second is a page preview in browser and the final image is a site preview in browser. My default browser is Safari (also testing in Chrome however).
If I leave the menu with default settings, the submenus appear off the site's live area and when I preview they do not show up at all. Presumabley they are off to the right side of the site.
The menu is and has been set to "All Pages" and not manually throught my build. Other than plaving the vertical menu widget within the accordion widget, it is more or less default with exeption of some styling.
I will try to rebuild the menu and see if the problem is still occuring. If you have any further sugestions I would be happy to hear them.
Thnaks again

Spry Accordion with custom scrollbar

I'm trying to find a Spry Accordion with a custom scrollbar.
There are other accordion scripts out there but I am most
comfortable working with the Spry script. I cant seem to find any
of these with a custom scrollbar. Can someone here help?

Mr. Andersson wrote:
> I'm trying to find a Spry Accordion with a custom
scrollbar. There are other
> accordion scripts out there but I am most comfortable
working with the Spry
> script. I cant seem to find any of these with a custom
scrollbar. Can someone
> here help?
Spry has no custom scroll bars. Currently Spry (as of 1.6.1)
doesn't have drag and drop which would be required for a custom
scroll bar. Best you might be able to do would be to try to style
the browser provided scroll bars, but that's not valid CSS, and I
know that Firefox doesn't show the styled scrollbars (IE does).
Take a look at this page in IE:
http://www.iconico.com/CSSScrollbar/
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry Accordion Triples In Width On Server

Im having a problem where when i upload my site to my server and view it the spry accordion on left is triple the width it should be and is pusshing eveything to the right, weird thing is it works fine when i view it locally. Anyone have any ideas what could be causing this?

Thank you for the link, this makes it very easy to see the problem.
First off, I think your are getting caught up in tables that accumulate in width. The Accordion, because you have not given it a width, will occupy all available width within the table cell.
Having said that, I will not answer your original question directly, but point you in the right direction in planning your web page.
Start by having a look here for an insight to a proper page structure http://www.alistapart.com/articles/previewofhtml5
The above link will tell you that within the BODY-tag there is a header, navigation area, main content and a footer with possibly one or two sidebars.
Staying within that structure using proper HTML combined with CSS will give a very flexible layout without the use of tables. Tables should only be used where the layout requires a table like in repeating data areas with rows and columns, like a spreadsheet. Tables should not be used for styling purposes.
A good place to start is here http://www.adobe.com/devnet/dreamweaver/
Once you have your layout under control, and you still have a problem with the accordion, please come back here.

Curious about the Spry Accordion widget?

Adobe is looking for participants for a brief (~1 hour) work observation and interview. Participants must meet the following criteria:
Dreamweaver CS4 user (beginner to advanced -- no CS3 users please)
Curious about Spry, but have never used Spry widget features in Dreamweaver
You know what an Accordion widget is from other sites, but have never inserted or edited one in Dreamweaver
Familiar with CSS styling and how it works
We are offering a small incentive to those willing to help us complete this study.
If you meet these requirements and would like to participate, please contact me at [email protected]
In your email, please confirm that you are a Dreamweaver CS4 user, that you have never inserted a Spry Accordion, and that you are comfortable working with and editing CSS.
Thanks!

I added an accordion widget and it works on one site page while same code won't work on another page.
It works here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now/K-5th-Grades.aspx
Does not work here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now.aspx
Yet both pages have identical code (with absolute links to the CSS and JS files).
Can anyone shed some light on a solution?

Accordion Styling (JavaFX 2.1)

Similar Messages

Maybe you are looking for