Variable Heights Panels Accordion

I have an Accordion with variable heights panels .
Is it possible to have at least one panel always open as the
fixed height panel behaves.
At the moment if I click the open panel it closes.
My Test
Page Here
Thanks,
Richard

Hi Steven.
Could you please provide the URL of the page where we can check it.

Similar Messages

Start with all Accordion panels closed with variable height panels

I inserted a Spry Accordion on this page: http://www.brucebarrdesign.com/video_new.htm
I want the panels to open to a size depending upon the content within them so I set the height to auto. The problem is that when you go to the page, the first panel is open. I want all of the panels to be closed when you first go to the page. Per the Help docs and some posts I've seen in the forum, I tried inserting this code:
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
However, this only works with fixed height panels. If I use it with the variable height, it opens all of them, so I commented it out for now. How can I get this to work?
Thanks

GPDMTR25 wrote:
I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor options, and a -1 for the "defaultPanel" option:
<script type="test/javascript">
var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
</script>
Angela
Hi Angela,
You are right, the only way it will work is by setting the fixed height to false. As for the for the default panel option, -1 is not a panel and if you had 3 panels we could have used the number 3 (panel1 = 0) or 99 or whatever as long as there is no panel with that number. If we had used the number 1 for instance, then the 2nd panel would be opened by default.
Hope this helps.
Ben

Accordion with variable height

Hi -
I have a 2-panel accordion with variable heights, and spry
data in both the top and bottom panels. Selections made in the top
panel will load data into the bottom panel, and the page opens to
the top panel by default. My problem is that the bottom panel will
only display enough height to show the initial HTML markup, and not
the spry data generated after the initial page load. Is there any
way to use an observer to "refresh" the accordion to reset its
height to accommodate the new data?
Also, is there a way to require that at least one panel
remain open when using variable heights?
Thanks in advance,
Rod

Hi,
We have a similar question on this
post.
To fit exactly with your request you should change the line:
regionHeight =
document.getElementById("myRegion").scrollHeight;
with:
document.getElementById("myRegion").style.height =
document.getElementById("myRegion").scrollHeight + 'px';
Diana

Tabbed panel with adjustable/variable height based on content

Is there anyway that you can create a tabbed panel with adjustable/variable height based on content in each tab?

Abhishek,
Thanks for your reply, however, it is not working with Muse. I added the Javascript to the head section and adjusted iframe and it displays as a small square in the upper left hand corner, unable to view the whole page.
Inserted into head section --
<script type="text/javascript">
function resizeIframe(obj)
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
</script>
inserted as an html object --
<iframe name="MycoSmooth" src="http://www.mycosmooth.com" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Below is the result:
The purpose is to have an independent website run the blogging capabilities, since muse doesn't directly support blogging as of yet.
Since the site is on a different domain, I am running into cross domain issues and it won't get the height of the page. The methods that apparently work use php and I am unsure how that would work in muse, if at all.

Accordion Variable height problem/ tried everything I could

Hello
I have tried two different versions spry1.4 to spry 1.61
But nothing seems to work...I have almost no knowledge of Java and just the basics of HTML/CSS
this is my code with the changed constructor at the end I also tried altering the values at the js script
as well as removing height at the CSS panel content class
Im using Mac and the problem is at firefox/chrome and safari
Any help would be greatly appreciated!
Thnx a lot!
<link rel="shortcut icon" type="image/x-icon" href="http://www.alexandrosgerousis.com/favicon.ico">
<link rel="stylesheet" href="css/vasi2.css">
<script src="scripts/SpryAccordion.js" type="text/javascript"></script>
<link href="css/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="lista">
<li id="simple">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="images/trondheim thumb.jpg" alt="Proscenium" border="none"></div>
    <div class="AccordionPanelContent">
      <iframe src="trondheim.html" height="100%" width="100%" frameborder="0"></iframe>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="nordhavn.html" target="nordhavn"><img src="images/cphswell2.jpg" alt="Copenhagen Swell" border="none"></a></div>
    <div class="AccordionPanelContent"><iframe name="nordhavn" height="100%" width="100%" frameborder="0"></iframe>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="ouroffice.html" target="ouroffice"><img src="images/selffab.jpg" alt="City Camping" border="none"></a></div>
    <div class="AccordionPanelContent"><iframe name="ouroffice" height="100%" width="100%" frameborder="0"></iframe></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="publications.html" target="publications">Publications</a></div>
    <div class="AccordionPanelContent"><iframe name="publications" height="100%" width="100%" frameborder="0"></iframe>
    </div>
</div>
</div>
</li>
<li id="simple">
<a href="http://www.dogma.gr" target="_blank"><img src="images/dogma.jpg" /></a></li>
</ul>
<script type="text/javascript">

</script>
</body>
</html>

Thnx for your reply Ben!
I tried typing the constructor correctly but its not working...what happens is that accordion opens with the default 200px height panel and then the others are frozen.
This is my CSS. I dont know what to do with the panel content height although I tried using it or not and the result is the same... I cant imagine what the problem is.
Alex
.Accordion {
    border-left: none;
    border-right: none;
    border-bottom: none;
    overflow: hidden;
.AccordionPanel {
    margin: 0px;
    padding: 0px;
.AccordionPanelTab {
    background-color:#FFFFFF;
    border-top: none;
    border-bottom:none;
    margin: 0px;
    padding-top:10px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    /*height:475px;*/
.AccordionPanelOpen .AccordionPanelTab {
    background-color: #FFFFFF;
.AccordionPanelTabHover {
    color: #FFFFFF;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #FFFFFF;
.AccordionFocused .AccordionPanelTab {
    background-color:#FFFFFF;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background-color: #CCCCC;

Can anybody help me up? Spry variable heights?

Hey everybody!
I need help!
I would like to make on a Spry Accordion variable heights...
Actually it shoudl look exactly like this one...
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePan elHeights
But where the hell should I paste/replace it? I tried already
everything...TT
I am using AdobeDreamweaver CS3
The code looks as follow when I dont change anything...
quote:
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* This is the selector for the main Accordion container. For
our default style,
* we draw borders on the left, right, and bottom. The top
border of the Accordion
* will be rendered by the first AccordionPanelTab which
never moves.
* If you want to constrain the width of the Accordion
widget, set a width on
* the Accordion container. By default, our accordion expands
horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector
is not necessary
* to make the widget function. You can use any class name
you want to style the
* Accordion container.
.Accordion {
border-left: solid 1px gray;
border-right: solid 1px black;
border-bottom: solid 1px gray;
overflow: hidden;
/* This is the selector for the AccordionPanel container
which houses the
* panel tab and a panel content area. It doesn't render
visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This
container houses
* the title for the panel. This is also the container that
the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #CCCCCC;
border-top: solid 1px black;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's
important to note that
* you should never put any padding on the panel's content
area if you plan to
* use the Accordions panel animations. Placing a non-zero
padding on the content
* area can cause the accordion to abruptly grow in height
while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on
the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in
this selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 200px;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open. The class "AccordionPanelOpen" is
programatically added and removed
* from panels as the user clicks on the tabs within the
Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
/* This is an example of how to change the appearance of the
panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover"
is programatically added
* and removed from panel tab containers as the mouse enters
and exits the tab container.
.AccordionPanelTabHover {
color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* This is an example of how to change the appearance of all
the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is
programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;
Can anybody give me a piece of advice, I dont know what to
do!!
thanks anyway!!

thanks for your answer!
I didnt know that you must add it into the html file.
I opened the SpryAccordion.js file and I changed it right
away
you had to change only the "true" into "false" that works
too!
And I was so consufed because when I clicked on "customize
this widget" there was everywhere written to open the CSS. file.
but thats only for the colour etc.
Very unclearly written and moreover on this page
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePan elHeights
No where was written I have to add it into my html file as
well.
I have read it now the first time in your post!! so anyway...
There is something I'd like to know, too!
I would be pleased if you could tell me whether it is
possibly to have two or more different
Spy Accordions at the same html file!

Displaying a Master Detail Relationship in a Panel Accordion or Tabs

Hi,
Is it possible to display a Master-Detail relationship in a Panel Accordion or Panel Tab or other component that visually divides the display?
Say I have a Department - > Employees master detail relationship and I want each tab in my accordion to represent each
departments and when I clicked the tab, the list of employees associated with that department is displayed.
I am exploring this idea but I cant get to find a resource on how to move forward. I am using JDev 11.1.1.4. Thanks

Hello,
I recently faced the same problem and did not find a clean solution either. So I implemented it a bit more "dirty". :-)
Instead of using the Department > Employee view link, I just created a new view object (say EmployeesFromDept), that has a bind parameter called p_DeptId:
     SELECT ...
     FROM   EMPLOYEES e
     WHERE e.DEPARTMENT_ID = :p_DeptIdThe Data Control of this VO will have an ExecuteWithParams operation that takes the department id as input. Create an action binding in your page definition that binds to this operation, called "RefreshEmployeesForDept":
     <action IterBinding="EmployeesFromDeptIterator" id="RefreshEmployeesForDept"
            InstanceName="MyAMDataControl.EmployeesFromDept"
            DataControl="MyAMDataControl" RequiresUpdateModel="true"
            Action="executeWithParams">
      <NamedData NDName="p_DeptId" NDValue="" NDType="java.lang.String"/>
    </action>In your page, add the current DepartmentId to each showDetailItem using an attribute and add a disclosureListener:
     <af:iterator id="i1" value="#{bindings.Departments.collectionModel}" var="row">
            <af:showDetailItem text="#{row.DepartmentName}" disclosureListener="#{pageFlowScope.myBean.toggleDisclosed}">
               <f:attribute name="currentDepartmentId" value="#{row.DepartmentId}"/>
                          <af:table value="#{bindings.EmployeesFromDept.collectionModel}" var="row"
                      rows="#{bindings.EmployeesFromDept.rangeSize}"
                      emptyText="#{bindings.EmployeesFromDept.viewable ? 'No data to display.' : 'Access Denied.'}"
                      fetchSize="#{bindings.EmployeesFromDept.rangeSize}"
                      rowBandingInterval="0" id="t1">
               //Lots of mapping column here
                    </af:table>
            </af:showDetailItem>
     </af:iterator>Now each showDetailItem that is generated knows the DepartmentId it "belongs to". In the toggleDisclosed(DisclosureEvent disclosureEvent) method, first fetch this attribute, so that you know the dept id of the showDetailItem that was clicked. Next, programmatically call the RefreshEmployeesForDept action binding if the current event is "disclosing the showDetailItem":
     public void toggleDisclosed(DisclosureEvent disclosureEvent) {
          String currentDepartmentId = disclosureEvent.getComponent().getAttributes().get("currentDepartmentId").toString();
          if(disclosureEvent.isExpanded()){
               DCBindingContainer bindings = (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
               OperationBinding operBinding = bindings.getOperationBinding("RefreshEmployeesForDept");
               if(operBinding != null){
                    operBinding.getParamsMap().put("p_DeptId", currentDepartmentId);
                    operBinding.execute();
    }Now, each time a showDetailItem is opened, the bind variable of the iterator belonging to your list of Employees will be refreshed with the correct DepartmentId. Ie the department that the showDetailItem represents.
Hope this helps! If you find a cleaner solution, please let me know. :-)
Regards,
Chris

Programmatically Open and close panel accordion on button click

Hi All,
Im using JDev 11.1.1.4 and adf faces application.
My requirement is to open/close panel accordion on button click programmatically.Kindly have a look at below figured one
Panel accordion Open Button
| ShowDetail1 //Consider first one is open inside close button is there to close this pane..
|
|
|
Close Button
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Show detail2 open button
Show details3 open button
Any idea...
Thanks,

Thanks Mr.frank...
But disclosed property is to make the showdetail to disclose or not.. but requirement is to open panel accordion on button click
By default using panel accordion have arrow icon in left to open in a same way if i open the second one, first will get close automatically...
Actually is there any way to do the default process (open/close) programmatically...

Toggling between forms and detail items in a panel accordion

Hi,
I have a panel accordion that currently has two showDetailItems. Each showDetailItem has a form. I am using one form for new data entry of an object, and the other form is for editing objects from a table (also on the page).
When one form is disclosed, and I do not entry all of the fields in the form, when I am trying to click on the other showDetailItem, I am getting validations saying that values are required on all of the fields.
I know that if I unclick the 'Mandatory' checkbox in the EO's, that this issue would be resolved, but the thing is that I don't want to do that, because I do want the validations mandated.
I just don't want those edits to fire when I toggle out of the form, and switch to another one.
I would like the validations to only run when the user clicks the 'Submit' button I have on each of the forms, not on focus lost.
Does anyone know how I can accomplish this?
Edited by: JRolls on Aug 16, 2010 7:29 AM

Hi there:
Please try to set the "immediate" attribute on the <af:showDetailItem> to "true" to delay the validation until the form Submission.
Please mark it 'Correct' if it is the correct one.
Good luck,
Alex
Edited by: Alexbie on 16-Aug-2010 8:59 AM

How to set the variable height for TileLayout

Hi,
I am using TileLayout in <s:List> component . TileLayout takes the maximum height of the children and draw the same height for rest of the children in all rows. Instead, I want to have all the rows with various heights if their children have different heights.
I know there is variable height property in <mx:List> component but which is not there in its spark counterpart. Can you please help me with this issue??
Thanks,
Bhoja

The spark TileLayout class lays out all of its elements in equally sized "cells". Cells of variable sizes is not currently supported.

Fix width and height of accordion

Hi All
I am building an application using jquery accordion on region 3 of page 0. In each subregion I have a treeview and when a node is choosen shows details about this node. My issue is how to fix width and height of accordion. I tried with jquery tabs instead of accordion and I put this on region header 'style=\"overflow-x:auto;display:block;max-width:340px;min-width:340px;overflow-y:auto;max-height:450px;min-height:450px;";" ', and closing tag at region footer and it worked.
Any idea?
Thanks a lot.
Ricardo
Theme: 13
EPG
Version: 4.0.2.00.06

Hi Jitu
Thank you for your replay but it didn't work as I need.
I made the following test. I put on region attribute \style="width:350px;". When each subregion of accordion has only a treeview, it didn't work. When I created another subregion into accordion with a simple report, it worked fine.
I don't know what is going on and also how to fix it.
Any other idea?
Ricardo

Panels Accordion in Google Chrome

I have problems with Panels Accordion in Google Chrome, it dosn't work.

Hi Steven.
Could you please provide the URL of the page where we can check it.

Tabular report with variable-height 2nd line?

I have a simple tabular (Tablix) report. The last field is a message (varchar(1000)) which I would like to place by itself on a second line (while still preserving the tabular format), with variable height.
The problem is, when I add a second row to the detail region, I can add the message field, but it is limited to the size of the field just above it. I'm trying to allow that message field to take almost the entire width of the second detail line. Can
this be done?
Thanks.

If you add a row inside the Details group, then select all cells inside the details group that are on the new row, you should be able to merge cells by right-clicking and choosing merge cells.
You cannot merge cells across different scopes (row groups, column groups, etc) so be certain that you are not selecting cells that span different groups.
"You will find a fortune, though it will not be the one you seek." -
Blind Seer, O Brother Where Art Thou
Please Mark posts as answers or helpful so that others may find the fortune they seek.

TileList with variable height renderer example?

I am desperately searching for an example of how to implement
a TileList with a variable height renderer. Well I guess to be more
clear, I am sort of able to do this, but I have a renderer that
uses a VBox, then an mx:Image. My single column TileList will hold
a collection of images, that are all scaled to the same width. I
need the height of the renderer to be based on the scaled height of
the image.

Google "FlowBox".
Tracy

Displaying "af:panel accordion" dynamically in UI when page loads

Hi
My problem is, whenever my homepage loads "af:panel accordian" should display dynamically in UI. Like, if I mention value 4 in manged bean it should display 4 panel accordion in UI when it loads, and if it is 6 then it should display 6 panel accordion in my homepage.
Please help me in this issue. Looking forward for you response.
Regards
Venkat.S

Hi
Actually only one panel accordion will be in my UI(sorry for my previous message), but the "af:showdetailitem" under af:panel accordion will differ and the values of this will varies each time when the page loads. So dynamically i should add af:showDetailItem into this af:panelAccordion from manged bean.
Regards
Venkat.S

Variable Heights Panels Accordion

Similar Messages

Maybe you are looking for