views:

578

answers:

1

Hi,

I am pretty new and got a following problem...

case:

We got an accordion and within this accordion we got an sexy-combo-box

    <html> 
<head> 
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 

  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; 

  <script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/lib/jquery.sexy-combo-2.1.2.min.js"></script> 
  <script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/examples/usage.js"></script> 
  <script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/jquery.autogrow.js"></script> 
  <script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/lib/jquery-1.3.2.min.js"></script> 
  <script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/lib/jquery.bgiframe.min.js"></script> 
  <script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/development-bundle/ui/ui.core.js"></script> 
  <script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/development-bundle/ui/ui.accordion.js"></script> 

  <link rel="stylesheet" type="text/css" href="../../../../Library/WebServer/Documents/sexy-combo/lib/sexy-combo.css" /> 
  <link rel="stylesheet" type="text/css" href="../../../../Library/WebServer/Documents/sexy-combo/skins/sexy/sexy.css" /> 

 <script type="text/javascript"> 

    $(document).ready(function(){ 
    $("#accordion").accordion(); 
    $("#basic-combo").sexyCombo(); 
  }); 
  </script> 


</head> 
<body style="font-size:62.5%;"> 

<div id="accordion"> 
   <h3><a href="#">Form A</a></h3> 
   <div> 
      <p>Please fill out the following:</p> 
      <p>1. What cookies do you like?</p> 
      <p><select id="basic-combo" name="resObj"  size="2"> 
           <option>jelly</option> 
           <option>biscuit</option> 
           <option>chocolate</option> 
            </select> 
        </p> 
      <p>2. What ice cream do you like?</p> 
      <p><select id="empty-combo" name="sort"  size="2"> 
           <option>strawberry</option> 
           <option>chocolate</option> 
           <option>vanilla</option> 
            </select></p> 
      <p>3. please tell us, how did you get attention to this site?</p> 
      <p> 
         <textarea style="width: 400px; height: 84px; min-height: 80px;" class="expanding" name="myTextarea"></textarea> 
      </p> 
   </div> 

<h3><a href="#">Form B</a></h3> 
   <div> 
      <p>4. Please tell us the minimum and max amount of chocolate that you eat:</p> 
      <p>min 
           <input name="minConsump" type="text" id="start" size="5" /> 
            max 
            <input name="maxConsump" type="text" id="finish" size="5" /> 
            required time (in minutes) that you take to eat the amount 
            <input name="reqTime" type="text" id="time" size="5" /> 

      </p> 
   </div> 
</body> 
</html>

problem: - accordion works fine, but sexy combo does not, you can just see the "normal" selection-box

already tried/strange phenomenon: - removing $("#accordion").accordion(); causes that sexy combo works

possible reason: - accordion starts before the sexy combo object ...after all the sexy combo object is not being loaded or some sort of "hidden" by the accordion object

does someone has an idea what the reason for this behavior could be ? or how to fix it ?

After reading some topics here I found smth. out like a jQuery live plugin, and that maybe I do need this plugin in order to handle it that when accordion is loaded, the sexy-combo plugin loads too.

best regards

leejin

A: 

I found a similar problem when using the sexyCombo in a dialog, so it would be worth checking whether the same problem exists when using it with an accordion.

After examining the markup I realised that the height of the list was being set to 0 when the combo was rendered in the dialog.

I added a dirty hack to my local copy of sexyCombo. Check out line 194 (ish) of the Javascript:

this.singleItemHeight = this.listItems.outerHeight();

For some reason outerHeight() returns 0, so I just added a check to see if singleItemHeight was 0 and if so set it to a sensible value.

Phil Hale