An unusual cause of wrong dropdown position

Jul 8, 2009 at 8:42 PM

FireFox 3.0, FireFox 3.5, IE 7 and IE 8 when using doctype of "-//W3C//DTD XHTML 1.0 Strict//EN".


When a FlexBox is dynamically loaded into a div, dropdown position is wrong.

The dropdown position is wrong because the outerHeight() and outerWidth() functions at line 139-140 return zero.  I tried using jQuery's height() and width() functions instead.  I also tried changing the style sheet and some hardcoded styling to get this to work.  My short term solution is the ugly hack way below at bottom.


Better explanation of problem:


Main page has a div like this:

<div id="formView" style="display:none">

Main page ajax loads a form into this div like this:

    url: "<%=request.getContextPath()%>/example/FlexBox/FlexBoxInAjaxedForm/LoadedForm.jsp",
    cache: false,
    dataType: "html",
    success: function(responseText,ajaxEventName){
        $("#formView").html( responseText );
        $( ".formView" ).show();

Notice that the loaded form comes from LoadedForm.jsp (see above).

LoadedForm.jsp contains a FlexBox.



Right after lines 139-140, I add this ugly hack:

// Danny's ugly hack bugfix.
if( $input.outerWidth()==0  ||  $input.outerHeight()==0 ) {
    $ctr.css('top', '22px');
    $ctr.css('left', '0px');


Since outerWidth() was zero, the width of the dropdown is also wrong.  But the text in the dropdown expands its width as necessary, but it is not as wide as the input box.

I am thinking a longer term solution is to change the generated markup so that the dropdown is positioned without computing its position with outerWidth and outerHeight.





Sep 26, 2009 at 11:17 AM



The problem is that you parent div ("FormView") is hidden which makes outerWidth/Height fail.  See:

Possible Solution(s):

1) Don't initialize the Flexbox until the form is "displayed".

2) Show the form until the Flexbox is displayed. then hide it.