Accordion Container Height

Is there a way to have the accordion content panels use
differing heights AND not use scrollbars? It seems that all the
content panels must be set at one specific height, because I'm
having a bear of a time getting the content panels to auto-adjust
the height in relation to its contents. It simply throws a scroll
bar in there, when it would look much cooler if it would simply
adjust its height instead to have all the contents visible.
I'm trying to replicate the effect seen at www.moofx.net.
Thanks in advance for any responses!

Hi,
You can do that by not setting a height value in the CSS.
There is a sample here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
But one limitation is that it doesn't support animation if
height isn't defined.
We are looking to fix that in the near future.
Thanks,
Don

Similar Messages

Accordion container doesn't animate changes between containers

Hi, I've noticed that the Accordion container no longer animates the change from one container to another - the switch is now abrupt, rather than a sliding animation as in SDK 3. Is this a known issue, and is there a way of restoring the sliding behavior? I've tried changing to the Halo AeonGraphical theme but didn't see a difference.
Thanks,
David

David,
I believe we changed the default value for the openDuration style, so you may have to explicitly set it to whatever value you want.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:VerticalLayout gap="20"
                paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <mx:Form styleName="plain">
        <mx:FormItem label="openDuration:">
            <s:NumericStepper id="numStepper" minimum="0" maximum="10000" value="3000" stepSize="1000" />
        </mx:FormItem>
    </mx:Form>
    <mx:Accordion id="acc" openDuration="{numStepper.value}" creationPolicy="all" width="100%" height="100%">
        <mx:VBox label="Red" backgroundColor="red" width="100%" height="100%" />
        <mx:VBox label="Orange" backgroundColor="haloOrange" width="100%" height="100%" />
        <mx:VBox label="Yellow" backgroundColor="yellow" width="100%" height="100%" />
        <mx:VBox label="Green" backgroundColor="haloGreen" width="100%" height="100%" />
        <mx:VBox label="Blue" backgroundColor="haloBlue" width="100%" height="100%" />
    </mx:Accordion>
</s:Application>
Peter

Slight movement of spry accordion container when animating

I have a spry accordion inside a container and when I click on each tab, the bottom of the container jerks up and back down slightly as the accordion panel animates the movement. This appears to happen in all browsers so I'm wondering if someone know a fix. I suspect it has to do with a height setting somewhere.
Here is my page:
http://www.esc-online.com/mars/tour_sp_ac.html
There are four css files associated with this:
http://www.esc-online.com/mars/css/reset.css
http://www.esc-online.com/mars/css/mars2.css
http://www.esc-online.com/mars/SpryAssets/SpryAccordion.css
http://www.esc-online.com/mars/SpryAssets/SprySlidingPanels.css
Thank you.
Simon

I will put together a gutted version of this and send it over if you have the time that would be fantastic. Making a gutted version may be the best thing at this point so I can slowly add stuff back and see what causes the problem. If i cant fix it by doing that I will zip and send the files.
Date: Tue, 27 Oct 2009 15:23:40 -0600
From: [email protected]
To: [email protected]
Subject: Spry Accordion Jerky/Jumping movement Issues in IE
Can you provide me with files where I can reproduce your issue with
out any other scripts on the site? This gives me a better debugging
area. If you do not feel comfy with posting it online. You can e-mail
it to mailto:[email protected]
>

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 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;

Variable accordion panel height

Hello,
I just started playing around with spry accordion today, and am not a javascript/css expert by any means :-)
I see that it is possible, from examples online, to have varying panel heights, depending on the contents of an accordion, but can't see how to make it happen. I see how to specify a fixed height for a panel, or how to have all panel heights be the same size as the panel with the most content, using the height specification in SpryAccordion.css under .AccordionPanelContent.
Any pointers much appreciated!
cheers,
Joan

See http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePan elHeights

Accordion Panel Heights.

Hi,
I am trying yo apply several accordion panels to different pages. Some of them may have 4 tabs, other 6, other 8. I noticed that when I changed the height of the Panel Content, this change affects to the other panels. Even when I change the name to each Accordion Panel, the properties are the same wherever I apply Acc. panel, right?
Could I have one accoerdion panel content with 100px of height and another one with 300px? Could you please help me?
Thx a lot.

Try the following
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<style>
#Accordion1 .AccordionPanelContent { height: 100px;}
#Accordion2 .AccordionPanelContent { height: 200px;}
#Accordion3 .AccordionPanelContent { height: 300px;}
</style>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: true });
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: true });
var Accordion3 = new Spry.Widget.Accordion("Accordion3", { useFixedPanelHeights: true });
</script>
</body>
</html>

Accordion Panel Height

At the beginning of the SpryAccordion.js there is code
commented-out that hints at the ability to dynamically define
accordionPanel heights (rather than the default "200"). I am not a
master javascripter and I've been banging my head against this all
day long. The animation of the accordion destroys the rendered
height information.
I was wondering if anyone had a quick-fix for this.
Thanks.

Thanks for the response. I understand that this isn't a
production release...I was just hoping there was an easy workaround
that I wasn't skilled enough to see yet.
My problem isn't setting the accordion panel to another
value. What I was hoping to do is have the accordion behave the
same way it does with animation set to false: each panel is as big
as the content. Right now, with animation turned on, every panel in
the accordion is the same height (200, 400, whatever you set it at)
regardless of how much content is in there. The animator sets the
height of elements to 200 or to zero, which destroys the original
height information. I understand why it needs to do this.
I was trying to have the panel animator store the height in a
variable, run the animation that kills the height, set the display
for the hidden panel to "hidden" (the way it achieves things in the
non-animated version), and then reapply the original height.
Unfortunately, I am not handy enough with javascript to make this
happen.
I don't expect a solution (I know you have many other,
important things on your hands)...but if there is an answer, it
would be greatly appreciated.

Getting Container Height With Dynamic Content Added

Hello,
I'm having issues getting a containers height after adding
content to that container. The code below shows you what I'm trying
to do. I have tried to validate the container and still get a 0 in
height. Is there a reason why this is happening because from my
point of view, after I add an object to the container the height of
the container should change. Please help.

Probably has to do with the fact you are calling check() in
applicationComplete, as this code works:

Help-help-help! IE7 footer & repeatable region container height

Hi everyone, I am new here so sorry if I am repeating a topic discussed already.
I have 2 problems from my template:
1. My website looks fine in Safari, FF but IE7 footer floats upto a div halfway up the page then the content is behind it and continues to the bottom of the screen, am I missing a vital trick here (is it best to have a main container for all content and a footer container outside this main content?)
2. If I put a div container around the 2 repeatable regions which are called ("main_content" and "sidebar") when I click the + on the editable region in the html page the outer container doesn't auto fit the height, how can I make outer container auto fit to how many repeatable regions I have clicked.
Template source code is below and test web page with 5 repeatable regions is http://aegmotorhomes.co.uk/test.html
I will take this time now to say thank you and to apologise for this dribble I may have wrote.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
#container {
background-image: url(../MOTORHOME%20IMAGES/Top%20Nav/topbanner.jpg);
background-repeat: repeat-x;
#TOPSPACE {
height: 5px;
width: 910px;
margin-right: auto;
margin-left: auto;
#search_container {
height: 35px;
width: 970px;
#search {
float: right;
width: 250px;
height: 25px;
#top_links {
height: 20px;
width: 970px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
font-weight: lighter;
font-style: normal;
line-height: normal;
#content {
background-image: url(../MOTORHOME%20IMAGES/Top%20Nav/TOPIMAGE.jpg);
width: 970px;
margin-right: auto;
margin-left: auto;
height: 266px;
background-repeat: no-repeat;
#navspacer {
height: 22px;
width: 970px;
margin-right: auto;
margin-left: auto;
#navbar {
height: 28px;
width: 970px;
margin-right: auto;
margin-left: auto;
#footer {
background-image: url(../MOTORHOME%20IMAGES/Footer/Screen%20shot%202011-07-15%20at%2016.16.51.png);
height: 350px;
clear: both;
position: relative;
#nav_bootomspacer {
height: 5px;
width: 970px;
margin-right: auto;
margin-left: auto;
#tab_spacer {
float: left;
height: 28px;
width: 15px;
#spacer2 {
height: 115px;
width: 970px;
margin-right: auto;
margin-left: auto;
#main_content {
float: left;
height: auto;
width: 715px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #397A7A;
background-color: #FFF;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 10px;
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #387675;
text-align: left;
a {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
a:link {
color: #FFF;
text-decoration: none;
a:visited {
color: #FFF;
text-decoration: none;
a:hover {
color: #55B0B1;
text-decoration: none;
a:active {
color: #FFF;
text-decoration: none;
font-size: small;
#copyright_spacer {
height: 10px;
width: 970px;
margin-right: auto;
margin-left: auto;
#Copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
height: 20px;
width: 970px;
margin-right: auto;
margin-left: auto;
#copy {
height: 20px;
width: 400px;
float: left;
#legal {
width: 30px;
float: right;
height: 20px;
#legal_space {
float: right;
width: 180px;
height: 20px;
#footer_details {
height: 100px;
width: 960px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
#footer_links {
height: 145px;
width: 970px;
margin-right: auto;
margin-left: auto;
border-bottom-width: thin;
border-bottom-style: dotted;
border-bottom-color: #333;
#footer_links table colour {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
#bottom_link_spacer {
height: 10px;
width: 970px;
margin-right: auto;
margin-left: auto;
#copy_left_spacer {
float: left;
height: 20px;
width: 20px;
#bottom_contact {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
float: left;
height: 110px;
width: 200px;
#logo_bottom {
float: left;
height: 110px;
width: 175px;
#footer_link_space {
height: 30px;
width: 970px;
margin-right: auto;
margin-left: auto;
#floatspace {
clear: both;
height: 20px;
#clowe {
float: right;
height: 60px;
width: 240px;
#footlinks {
float: left;
height: 140px;
width: 600px;
#socialmedia {
width: 210px;
float: right;
#socialspacer {
float: right;
height: 80px;
width: 300px;
#footlinks table medium {
font-size: medium;
#footlinks table tr td a {
font-size: small;
color: #CCC;
#you_are_here {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #666;
width: 930px;
margin-right: auto;
margin-left: auto;
#youspacer {
height: 15px;
width: 970px;
margin-right: auto;
margin-left: auto;
.you_are_herecolour {
color: #409EA0;
font-weight: bold;
.fillin {
font-weight: bold;
color: #387675;
#sidebar {
float: right;
height: auto;
width: 199px;
padding-right: 20px;
padding-left: 22px;
background-image: url(../MOTORHOME%20IMAGES/Sidebar/sibar%20temp.jpg);
background-repeat: no-repeat;
#adverts {
margin-bottom: 20px;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<link href="../MOTORHOME IMAGES/CSS/Footer Links.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('../MOTORHOME IMAGES/Tabs/2swift.jpg','../MOTORHOME IMAGES/Tabs/2escape.jpg','../MOTORHOME IMAGES/Tabs/2autocruise.jpg','../MOTORHOME IMAGES/Tabs/2used.jpg','../MOTORHOME IMAGES/Tabs/2service.jpg')">
<div id="container">
<div id="headwrap">
<div id="content">
    <div id="TOPSPACE"></div>
    <div id="search_container">
      <div id="search">
        <script type="text/javascript">
// Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
//Enter domain of site to search.
var domainroot="aegmotorhomes.co.uk"
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
        </script>
        <form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
          <input name="q" type="hidden" />
          <input name="qfront" type="text" style="width: 150px" />
          <input type="submit" value="Search" />
        </form>
      </div>
    </div>
    <div id="top_links">
      <div align="right"><a href="http://www.aegmotorhomes.co.uk/">Home</a> | <a href="http://aegmotorhomes.co.uk/news.html">News</a> | <a href="http://aegmotorhomes.co.uk/offers.html">Offers</a> |<a href="http://aegmotorhomes.co.uk/brochures.html"> Brochures</a> | <a href="http://aegmotorhomes.co.uk/insurance.html">Insurance Repairs </a>| <a href="http://aegmotorhomes.co.uk/conversions.html">Conversions</a> | <a href="http://aegmotorhomes.co.uk/refurbishment.html">Refurbishment</a> | <a href="http://aegmotorhomes.co.uk/contact.html">Contact us |</a></div>
    </div>
    <div id="navspacer"></div>
    <div id="navbar">
      <div id="tab_spacer"></div>
      <a href="http://aegmotorhomes.co.uk/swift.html"><img src="../MOTORHOME IMAGES/Tabs/1swift.jpg" alt="Swift Motorhomes" name="swift" width="107" height="26" border="0" id="swift" onmouseover="MM_swapImage('swift','','../MOTORHOME IMAGES/Tabs/2swift.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="http://aegmotorhomes.co.uk/escape.html"><img src="../MOTORHOME IMAGES/Tabs/1escape.jpg" alt="escape motorhomes" name="escape" width="107" height="26" border="0" id="escape" onmouseover="MM_swapImage('escape','','../MOTORHOME IMAGES/Tabs/2escape.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="http://aegmotorhomes.co.uk/autocruise.html"><img src="../MOTORHOME IMAGES/Tabs/1autocruise.jpg" alt="autocruise motorhomes" name="autocruise" width="107" height="26" border="0" id="autocruise" onmouseover="MM_swapImage('autocruise','','../MOTORHOME IMAGES/Tabs/2autocruise.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="http://aegmotorhomes.co.uk/used.html"><img src="../MOTORHOME IMAGES/Tabs/1used.jpg" alt="used motorhomes" name="used" width="107" height="26" border="0" id="used" onmouseover="MM_swapImage('used','','../MOTORHOME IMAGES/Tabs/2used.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="http://aegmotorhomes.co.uk/service.html"><img src="../MOTORHOME IMAGES/Tabs/1service.jpg" alt="motorhome service" name="service" width="107" height="26" border="0" id="service" onmouseover="MM_swapImage('service','','../MOTORHOME IMAGES/Tabs/2service.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="youspacer"></div>
    <div id="you_are_here">You are here:<span class="fillin"> Fill in</span></div>
    <div id="spacer2"></div>
<div id="main_content">
<div id="Newstitle">AEG Motorhomes News & Updates
<div id="newstitletext"> AEG Motorhomes keeps you informed of all our latest offers and discounts on Motorhome and Campervan New & Used Sales, Service, Parts and Accessories. We will post all Motorhome events, Shows, model release dates and articles here. If you have any Motorhome news or articles you wish us to publish, please call our team on 01562 535 039 or alternatively you can email [email protected].</div>
</div>

<div id="Content_area">
<div id="Content_head">head</div>
<div id="content_text">text</div>
</div>
</div>
    <div id="sidebar">
      <div id="adverts">
        <p> </p>
      </div>
    </div>
    <div id="lowerspacer"></div>
</div>
</div>
<div id="content_space_bottom"></div>
<div id="floatspace"></div>
<div id="footer">
<div id="copyright_spacer"></div>
<div id="Copyright">
    <div id="copy_left_spacer"></div>
    <div id="copy"> © 2011 All Electric GaragesMotorhomes. All Rights Reserved</div>
    <div id="legal"></div>
    <div id="legal_space"><a href="http://aegmotorhomes.co.uk/accessibility.html">Accessibility</a> | <a href="http://aegmotorhomes.co.uk/privacy.html">Privacy</a> | <a href="http://aegmotorhomes.co.uk/legal.html">Legal</a></div>
</div>
<div id="bottom_link_spacer"></div>
<div id="footer_links">
    <div id="footlinks">
      <table width="100%" border="0" cellspacing="5">
        <tr>
          <td width="5"> </td>
          <td><a href="http://aegmotorhomes.co.uk/swift.html">Swift</a></td>
          <td><a href="http://aegmotorhomes.co.uk">Home</a></td>
          <td><a href="http://aegmotorhomes.co.uk/conversions.html">Conversions</a></td>
        </tr>
        <tr>
          <td width="5"> </td>
          <td><a href="http://aegmotorhomes.co.uk/escape.html">Escape</a></td>
          <td><a href="http://aegmotorhomes.co.uk/news.html">News</a></td>
          <td><a href="http://aegmotorhomes.co.uk/refurbishment.html">Refurbishment</a></td>
        </tr>
        <tr>
          <td width="5"> </td>
          <td><a href="http://aegmotorhomes.co.uk/autocruise.html">Autocruise</a></td>
          <td><a href="http://aegmotorhomes.co.uk/offers.html">Offers</a></td>
          <td><a href="http://aegmotorhomes.co.uk/service.html">Service</a></td>
        </tr>
        <tr>
          <td width="5"> </td>
          <td><a href="http://aegmotorhomes.co.uk/used.html">Used</a></td>
          <td><a href="http://aegmotorhomes.co.uk/brochures.html">Brochures</a></td>
          <td><a href="http://aegmotorhomes.co.uk/sitemap.html">Site map</a></td>
        </tr>
        <tr>
          <td width="5" height="20"> </td>
          <td><a href="http://aegmotorhomes.co.uk/trailertents.html">Trailer Tents</a></td>
          <td><a href="http://aegmotorhomes.co.uk/insurance.html">Insurance</a></td>
          <td><a href="http://aegmotorhomes.co.uk/contact.html">Contact us</a></td>
        </tr>
      </table>
    </div>
    <div id="socialspacer"></div>
    <div id="socialmedia"><a href="http://www.facebook.com/pages/All-Electric-Garages-Group/112905889042"><img src="../MOTORHOME IMAGES/Footer/facebook.jpg" alt="" name="facebook" width="40" height="40" border="0" id="facebook" /></a> <a href="http://twitter.com/#!/allelectricplc"><img src="../MOTORHOME IMAGES/Footer/twitter.jpg" alt="" name="twitter" width="40" height="40" border="0" id="twitter" /></a> <a href="http://www.youtube.com/user/allelectricgarages"><img src="../MOTORHOME IMAGES/Footer/youtube.jpg" alt="" name="youtube" width="40" height="40" border="0" id="youtube" /></a> <a href="http://allelectricgaragesplc.blogspot.com/"><img src="../MOTORHOME IMAGES/Footer/blogger.jpg" alt="" name="blogger" width="40" height="40" border="0" id="blogger" /></a></div>
</div>
<div id="footer_link_space"></div>
<div id="footer_details">
    <div id="bottom_logos">
      <div id="logo_bottom"><a href="http://aegmotorhomes.co.uk"><img src="../MOTORHOME IMAGES/Footer/3logosfootersquarenew.jpg" alt="Aeg Motorhome Logos" name="motorhomelogos" width="144" height="94" border="0" id="motorhomelogos" /></a></div>
      <div id="bottom_contact">All Electric Garages Motorhomes<br />
        Churchfields<br />
        Worcestershire<br />
        DY102JL<br />
        Tel: 01562 535 039<br />
        Email: [email protected]</div>
      <div id="clowe"><a href="http://aegmotorhomes.co.uk"><img src="../MOTORHOME IMAGES/Footer/Aeg Logodesigned blk.jpg" alt="Designed by CLowe" name="clowe" width="217" height="54" border="0" id="clowe2" /></a></div>
    </div>
</div>
</div>
</body>
</html>

You are posting to the wrong forum. For html/css layout issues try posting to the Dreamweaver forum.

Splitter Conatiner Fix Container Height

Hi
I am using Splitter Container . I have splitted in two rows and 1 column. In 1st row there are two buttons and in 2nd row there is ALV tree.
Now if the user move the alv tree container it will come over or overlap toolbar container .
So Is there any way i can fix the top container ?
I have fixed upper container by below code but as below container is movable it will overlaps the above container when the user move it up.
CALL METHOD wcl_splitter_9200->set_row_sash
    EXPORTING
      id    = 1
      type = wcl_splitter_9200->type_movable
      value = wcl_splitter_9200->false.
CALL METHOD wcl_splitter_9200->set_row_height
    EXPORTING
      id     = 1
      height = 4.
Please suggest
Thanks
Ankesh

try this
data : w_container         TYPE REF TO cl_gui_custom_container.
CREATE OBJECT w_container
    EXPORTING
      container_name              = 'CONTAINER'
    EXCEPTIONS
      cntl_error                  = 1
      cntl_system_error           = 2
      create_error                = 3
      lifetime_error              = 4
      lifetime_dynpro_dynpro_link = 5
      others                      = 6.
data : w_split             TYPE REF TO cl_gui_easy_splitter_container.
CREATE OBJECT w_split
     EXPORTING
       parent            = w_container
       orientation       = 0
       sash_position     = 0
       with_border       = 0
     EXCEPTIONS
       cntl_error        = 1
       cntl_system_error = 2
       others            = 3.
IF sy-subrc NE 0.
ENDIF.
data : w_contnr_top        TYPE REF TO cl_gui_container,
       w_contnr_bot        TYPE REF TO cl_gui_container.
      w_contnr_top = w_split->top_left_container.
      w_contnr_bot = w_split->bottom_right_container.
CREATE OBJECT w_split
     EXPORTING
       parent            = w_container_top
       orientation       = 0
       sash_position     = 0
       with_border       = 0
     EXCEPTIONS
       cntl_error        = 1
       cntl_system_error = 2
       others            = 3.
IF sy-subrc NE 0.
ENDIF.
      w_contnr_top1 = w_split->top_left_container.
      w_contnr_top2 = w_split->bottom_right_container.

Adding a container to sap.m.Page causes container height to be 0px. Any fixes?

In a simple SAP UI5 mobile app if I add a TileContainer to a sap.m.Page, the TileContainer's height is set to zero. Try to save the attached txt file, by changing the extension to .html and then open in the browser. Go to page 2 and inspect the dom elements. The element with id projectTileContainer has height 0 and consequently it's content is not visible. I have also seen this behavior when adding NavigationContainer to page. What am I missing?

Yep, that's the correct answer, thanks.
The reason is that without "enableScrolling = false" the height of the page content area adapts to the height of the content. And the height of the TileContainer (this is the content) adapts to the height of the parent, so there is a short circuit and the browser collapses it to zero. You'll find this pattern often in CSS height handling.
Regards
Andreas

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.

Can't Auto Height Container

How do I get the container to auto height for the larger DIVs inside it?
www.seastrata.com/index-new.htm

Divs are auto height by default as the amount of content you put inside them determines container height. More content = more height. Less content = less height.
If you're floating elements inside your container, a phenomenon known as margin-collapse can occur. To overcome this, add overflow:hidden to your parent container.
The magic of “overflow: hidden” — Articles — Colin Aarts, freelance web developer
Nancy O.

Can more than one child be visible/open at the same time in Accordion navigator container?

I have a situation where I need a layout like Accordion
container but with more than one child panel visible at the same
time. Is it possible with Accordion container? If not, any
suggestions to implement this layout?

Ryan,
Could you elaborate on what you mean when you say that the program which ran first cannot find its report? Are you trying to modify the same report simultaneously with these different apps?
Regards,
Jared Boothe
Staff Hardware Engineer
National Instruments

Accordion Container Height

Similar Messages

Maybe you are looking for