Accordion Height

Hi All,
How can I provide the getHeight() Api for accordion.
I am aware about maxHeight property of accordionSection.
But my requirement is to implement getHeight() api on accordion, which will take care of all the sections heights, expanded section and also browser specific paddings. in essence resizing should also be considered.
Has anyone tried this?
Any pointers would be helpful.
Thanks.

Please mark this Discussion with a Correct Answer and Helpful Answer where appropriate.  See http://scn.sap.com/community/support/blog/2013/04/03/how-to-close-a-discussion-and-why   Even if you discovered the solution without any outside contributions, it helps others to understand what the solution turned out to be.
Regards, Mike
SAP Customer Experience Group - CEG

Similar Messages

  • Dynamic Accordion height (revisited)

    Hi All,
    I have an application that allows the user to add or remove
    Accordion panels at will. My problem is that I want to keep the
    overall Accordion height constant independent of the number of
    panels.
    I have found a simple way to keep the overall height of an
    Accordion constant by varying the AccordionPanelContent height as
    follows:
    <div class="AccordionPanelContent" style="height:
    expression(500-(20*{ds_RowCount})+'px'); margin: 0px;">
    The problem is that it only works in IE5+.
    Is there a way to achieve the same result for other browsers?

    quote:
    Originally posted by:
    Barascu Diana
    Hi,
    you can use expression () only for IE and if you want to get
    the same behavior for the other browsers, you should write some
    java script code to compute the height and then to set it on the
    element.
    Something like this:
    var el = document.getElementById('id_{ds_RowID}');
    if (el){
    el.style.height = 500 - (20 *
    (isNaN(parseInt('{ds_RowCount}'))? 0 : parseInt('{ds_RowCount}')))
    + 'px';
    Diana
    Hello Diana,
    Thank you very much for your quick response. I used your
    script and it and it works like a charm.
    Kind regards,
    Ben

  • Page length doesn't snap to accordion height when accordion at page bottom becomes shorter?

    Hello, I created a page with an accordion widget at the bottom of the page and rather than snapping to the height of the accordion the page sticks to the length of the tallest accordion height. You can see my test page at http://hawksgym.com/cesarnoel/   Is there something I can do or will I have to resort to all the accordion divs always adding up to the same height?

    Hi,
    Do you have Sticky Footer Checked? If yes, please uncheck it and then try.
    Regards,
    Aish

  • Dynamic overall Accordion height

    I have several Spry Accordions in my application. The number
    of panels in each of these accordions are database driven, where
    each user can customize the number of panels and their titles. The
    new SpryNestedXMLDataSet is used to show the data in each panel.
    This works extremely well!
    However, the layout of the page dictates that the overall
    height of the accordion be the same, weather it be for 3 panels or
    for 10 panels. Is there a way that this can be achieved in
    Spry?

    Hi Ben,
    now I see your request....
    you want a fix height container in which to have the
    accordion with X panels...
    You can add the accordion inside another div container for
    which you set a fix height and don't forget to add also
    overflow:auto (this is to see only the content what fits in the
    height you specified).
    You should have something like this:
    <div style="height:600px; overflow:auto;">
    <div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
    <p>Content 1</p>
    </div>
    </div>
    ....... as much panels you need...
    </div>
    </div>
    So just add a new div with that two properties around the
    accordion.
    Please let me know if I answered to you question,
    Diana

  • 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

  • Manupulating Jquery Accordion height

    Hi all,
    I have downloaded accordion css and its js from jquery website and have implemented accordion in our application. Has anyone played with its js or css to decrease or increase the height of the header title of all the regions included in the accordion? Pls help. Its urgent. Thanks
    With Regards,
    Sunil Bhatia

    If any one having similar issue here is the solution.
    Just replace the Template code from [Patrick's solution|https://forums.oracle.com/forums/thread.jspa?messageID=4429587] with the below one :
    <div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
    #BODY##SUB_REGION_HEADERS##SUB_REGIONS#
    </div>
    <link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.accordion.css" type="text/css" />
    <script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.accordion.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    apex.jQuery(function() {
      apex.jQuery("##REGION_STATIC_ID#").accordion({
                   autoHeight: false
      var autoHeight = apex.jQuery("##REGION_STATIC_ID#").accordion( "option", "autoHeight" );
      apex.jQuery("##REGION_STATIC_ID#").accordion( "option", "autoHeight", false );
    </script>Rest all remains same.
    Good luck.

  • How to edit the accordion height?

    Hi,
    first of all, sorry for my english ;)
    I tried to edit my Spry Accordion's height like that:
    <div id="Services" class="Accordion" tabindex="0"
    style="height: 500px;">
    but it seems to make an error in the accordion (
    view
    screen). how can i modity the height of this "control" without
    any problem in the design...
    Thanks,
    Regards.

    Hi,
    if you want to use a fix layout, then you should use a
    formula for computing correctly the height.
    For the accordion situation, you should use a formula like
    this:
    Accordion_container_height = sum of all (PanelTabs_height) +
    PanleContent_height + sum of all(margins, paddings and borders).
    This is translated to: the Accordion container height
    depends by all the tabs height, the PanelContent height and also
    you should not forget by the borders, paddings and margins.
    In your case, you should compute first the height for all
    Panles tabs together plus content plus borders, margins and then
    you'll have the correct size for the container that you initially
    set to 500px
    Hope this helps,
    Diana.

  • Multiple galleries with accordion

    Hi! I've been using Spry for a school project; I've developed
    a gallery as an example.
    You can see it here:
    http://lavalamp.altervista.org/gallery/
    I would say that it's finished, but I still have a couple of
    issues I want to resolve (or understand, since my goal was not to
    build a site, but to explain how Spry works!).
    1) Thumbnails: they do not grow "centered"; the grown image
    is positioned a little on the left. Why?
    2) Thumbnails again: the images are larger than they look
    (they are, more or less, 150x150 while on the screen they are
    75x75). The grown thumbnails look "zoomed" and grainy even if the
    images could be enlarged without any zoom effect. Is there any way
    to fix this?
    3) Accordion height: I found that the only way to change its
    height is change the AccordionPanelContent height, and specify it
    in PIXEL. A height in % is ignored. Is this intended? How could I
    make an accordion that adapts itself to the browser's height?
    4a) The browser: with Internet Explorer 6, the accordion does
    not close its panels! Why?
    4b) The browser again: Internet Explorer 6 shows the
    thumbnail's "alt" text, Firefox doesn't, but I think this is a
    browser issue, not Spry's
    5) I'm not completely satisfied with the way thumbnails are
    loaded; I made every thumbnail have a "parent ID" and every gallery
    have an ID, then I check when they match and build the panels
    accordingly. It seems the only way to go with this version of Spry.
    6) The "repeatchildren" instruction: I thought it was meant
    to cycle through the childrens of an xml node, but it seems to do
    something else. I didn't really understand the difference between
    repeat and repeatchildren.
    It's all that comes to my mind. Thank you for any help or
    suggestion.
    Simone

    Hi Simone,
    I will answer to some of your questions for the moment but I
    don't have an answer to all of them.
    1) You have into your page the images centered by CSS:
    text-align:center. In the same time the Grow Shrink effect will try
    to center the image while zooming.
    For this we calculate the new image size and we move the left
    corner with half of the difference between the dimentions. In this
    case the image will have the center in the same place and grow left
    and right size equaly.
    In your situation the shift will happen only after the
    browser re-centered the zoomed image. The combined effect is the
    one you see and the image instead of being centered is zoomed
    entirely to left.
    In this case you should loose one of the centering systems.
    If you want the Grow Shrink effect to stop centering while zooming
    you'll have to add the following option: growCenter:false
    Spry.Effect.GrowShrink(targetElement, {duration: 400, from:
    '100%', to: '200%', toggle: true, setup:setzindex,
    finish:resetzindex, growCenter:false});
    In case you want to remove the CSS text-align to center you
    need to center the initial images view by specifing a margin-right
    to each div.
    2) This seems to be a problem mainly generated by the way the
    browsers zoom the images. It appears that after the page is
    rendered if you have a larger image with width and height specified
    they transform the loaded images rendered to those dimensions. When
    we specify the new width and height for the image they will
    increase the values for the computed image and will not use the
    original one. In this situation we don't have much to do.
    4b) The IE as we know always does some things accordingly to
    its free will. Here are some examples:
    - A form element without an id attribute defined but with the
    name attribute defined will take as id the name value messing lots
    of JavaScript codes.
    - For images if the title is not defined IE will
    automatically pre-fill its value from the alt attribute. In you
    situation you'll have to add also empty title attributes to force
    it stop behaving the way it does.
    5) 6) We are working on nested-structure as we speak. More
    details about this you may find in previous answer of one of my
    colleagues:
    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=602&threadid=1231616&fo rumid=72.
    Cristian MARIN

  • Spry accordian problems in IE

    I have created a website that uses the Spry accordian effect that has been modified to be used for sections for the site.
    I have tested it on all browsers however found out that the spry accordian doesn't work in Internet explorer.
    I have noticed there seems to be many problems regarding spry and IE, but not come across any that have  definitive answer for my problem.
    www.slicedesign.co.uk
    Is there anybody who could shed some light ont his for me?
    nathanslice

    Hi,
    I've looked at your site on IE7 / IE6 and Firefox 3.0.1 on my PC.
    I suspect some of it might be down to the following bit of styling in your accordian CSS
    .Accordion {
        overflow: hidden;
        height: 640px;
    IE6 incorrectly interprets height as min height.
    Try changing it to
    .Accordion {
         overflow: hidden;
         min-height: 640px;
    /* for IE6 and below */
    * html .Accordion {
    height: 100px;
    Also you have repeated IDs when they should be unique within webpage and you have not closed various tags properly.  Visit http://validator.w3.org/ and fix the markup errors and then let's see what your page then looks like.  Internet Explorer is very fussy about closing tags properly and can stop rendering the page when it finds an error where as Firefox etc are more tolerant and can still rneder the page properly.
    Cheers
    Phil

  • CFSelect Not loading static options

    My code is not showing my options in the select box. My a
    simplified version of my code is below, Thank you in advance for
    your help
    <cfform name="myform" height="285" width="480"
    format="Flash" skin="haloblue">
    <cfformgroup type="accordion" height="240"
    style="marginTop: 0">
    <cfinput type="text" required="Yes" name="task_name"
    label="Task Name:" value="" width="200"/>
    <cfinput type="text" required="Yes" name="url"
    label="URL:" value="" width="200"/>
    <cfinput type="text" required="Yes" name="timeout"
    label="Timeout: (Secs)" value="" width="200"/>
    <cfselect name="interval" label="Interval:"
    required="true">
    <option value="Once">Once</option>
    <option value="Twice">Twice</option>
    </cfselect>
    </cfformgroup>
    </cfform>

    Found my Answer:
    When the hosting company created my account, they did not
    copy the /CFIDE/scripts directory into my Web root. The Flash-based
    cfform relies on the files in this directory. This folder was more
    than likely omitted for security reasons, but they cut off one of
    the key features of CFMX 7 by doing so.
    To fix the issue, I FTPed the /CFIDE/scripts folder from my
    local CFMX 7 install to my remote host in binary mode.

  • Dynamic Accordion Children/Height Issue

    Hello,
    I am fairly new to flex, so this issue may actually be an easy fix, but please bare with me.
    I have an accordion in my project that is being populated with child canvas containers based on the result of a mysql_query from AMFPHP. Due to space limitations the accordion MUST remain the exact same size no matter how many records come back from my query. My problem is that when too many accordion child containers are generated they overlap on top of each other.
    Is there a way to turn a scrollbar on for the accordion? If not then is there a way to limit the number of child containers displayed inside the accordion and then control that with a VScrollbar?
    Thanks,
    Brian

    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 widget browser panel height

    I am using the accordion widget browser and would like to shorten the height of the
    panels - how can I do this...

    I found the solution!
    Sample of before: www.muohio.edu/lll/studyabroadweek/index2.html
    Sampe of after: www.muohio.edu/lll/studyabroadweek.
    The solution was at: http://docs.jquery.com/UI/Accordion#options  but was a bit difficult for me to figure out how to implement it... after a bit of experiment - I got it!
    In your .html document, at the beginning of the widget look for the code in black.  Code in bold red is what was needed to solve the issue.
    $(function(){
                    // Accordion
                    $("#jQueryUIAccordion").accordion({ header: "h3",
                                                animated: "slide",
                                                event: "click",
                                                collapsible : "false",
                                                autoHeight: false

  • Spry Accordion Different Panel Heights

    I'm building a Spry Accordion Widget as a left nav menu with
    25 different panels. Some of my panels contain 10 different links
    and others contain only 1 single link. Therefore I would like to
    adjust the height of each panel individually according to the
    number of links they contain, so I don't end up with huge white
    spaces in panels that contain fewer links. My initial idea, in
    addition to the .AccordionPanelContent class was to add an "id" to
    each panel and control each panels height through CSS. But for some
    reason I haven't been successful that way. It looks like all panels
    tend to take the height of the first panel, regardless of their
    individual set heights. I wonder if I can resolve my problem
    uniquely with CSS, or I do I have to go and change something in the
    SpryAccordion.js file.
    Thanks.

    Hi Donald, I inserted <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", {
    useFixedPanelHeights: false });
    </script> into my code. It's almost there, but not
    quite. I can see that it is trying to re-ajust the panels' height,
    but for panels that have a larger content it tends to show the
    whole panel's content and then hides the half of it. Also for
    panels with fewer content it doesn't seem to have an effect at all.
    I don't know if I have to fix something in the CSS or place the
    Acc1 ID in a different location within my accordion HTML code.
    Thank you.
    Here's the URL I'm working on if you want to take a look.
    http://64.49.218.100/product_p/00-120-0ll.htm

  • 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

  • Accordion widget content height

    I'm using an accordion widget for the navigation of a site.  Some of the sections have sub-sections and other do not.
    Is it possible to remove the "content area" of an accordion widget but keep the label?  I tried to set the height of the content area to "0" so the items below would not shift down but it appears that the minimum height for the content area is 1 pixel.
    The page is posted at http://ekagra.com/dev/
    If you click the 'Services' or 'Clients/Partners' links, you'll see the other labels shift down.

    Thanks for the quick reply. I'm using spry pre-release 1.6 in
    CS3 so maybe it's set up different. When I drop the spry accordian
    widget into my html it creates a css and js file to go with it. I
    found that if I edit the js file to read
    FixedPanelHeights = false;
    that the panel will resize for the content. If left to the
    default, true, the panel will have a scroll bar to the side for
    overflow, which I don't like. Then with it set to false, I can
    adjust all the rest thru the css file. Again, I'm a newbie when it
    comes to this stuff so I'm proable doing something backwards, but
    this seems to work. Thanks again.
    Tommy

Maybe you are looking for