tags:

views:

28

answers:

1

I've got a link which triggers a hidden div which is supposed to show in a fancybox. The content in each hidden div is of different heights. Right now, when the fancybox opens, the div content extends beyond the borders of the fancybox. It's not resizing for some reason.

Here is a sample of the html:

<div class="faqWrapper">
<a class="faqLink" href="#faqContent1132116">How Do I Join?</a>
<div id="faqContent1132116" class="faqBox">
<div class="fancybox_wrapper_content"><p>How Do I Join?</p>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum
   sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
  Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam 
  erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere 
  sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc 
  ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu 
  dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, 
  accumsan eu, blandit sed, blandit a, eros.<br></p>
</div>
</div>

Here is the trigger code for the fancybox:

$("a.faqLink").fancybox({
    type : 'inline',
    autoScale : false,
    autoDimensions : true

Any idea how to get the box to resize. I've tried the resize function but it breaks the code. I must be implementing wrong. Here's what I've tried.

$("a.faqLink").fancybox.resize();
A: 

Is the content hidden when you open Fancybox? If so, FancyBox can't tell the size of a hidden element.

Chuck Conway
I tried using display block on the hidden content. Same result. Text extends beyond the bounds of the box.
mmsa