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 -
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... -TWrap 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 BhatiaIf 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.
SimoneHi 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 -
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?
nathansliceHi,
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,
BrianWrap 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.06Hi 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
-
I just installed Lion and everything works fine except for iTunes. It says it cannot find my iTunes file, then asks if I want the latest version of iTunes. I clck yes, then get a box saying it is waiting for other downloads to complete. That box jus
-
How to update bookmarks when merging two PDF files?
We have a company catalog that gets generated once a night. It's three step process: Step 1) A raw XML file gets generated from our main ERP software (Microsoft Dynamics). Step 2) Then that raw XML file is ran against a stylesheet with X
-
Calculating total memory in oracle RAC environment
I have to calculate total memry in RAC environment. For shared and buffer pool I execute show sga. For UGA and PGA I execute statement that have two different values. This is my two different methot for calculating total memory in oracle RAC environm
-
Show email information with diferent language correctly
hi I have an web site that create with pl/sql server page script. This web site inclue forms that user can search from information of library books. One of facility of this program is email page that can email some of informations of books that user
-
Difference between date in 'HH:MI:SS.FF' format
Hi All, I am on Oracle 10G. I have small doubt about How to Calculate the Difference between two date in formate 'HH:MI:SS.FF'? Sample data to_date('14-Aug-2007 11:07:42','DD-Mon-YYYY HH24:MI:SS.FF') to_date( '14-Aug-2007 10:02:30','DD-Mon-YYYY HH24: