Announcement

Collapse
No announcement yet.

Problem with Dropdown-Menus and CSS-Layout

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem with Dropdown-Menus and CSS-Layout

    Hello,

    I'm having a bit of a problem with the DHTML-Dropdowns and my CSS-Layout. I'm using relative-positioned <div>-containers.

    Now, my Layout is a bit more complex, but the problem can be reduced to one quite simple div-Container around the forum, for example positioned relative top 100px and left 100px. Somehow the DHTML-Dropdowns seem to inherit these settings: they are floating around just 100px/100px from where they're supposed to be.

    Any hints - since I'm probably not the first person to try to implement a div-based header...

    Thank you,
    Sven

    Oh - here's a screenshot:
    Click image for larger version

Name:	dropdown-problem.jpg
Views:	1
Size:	45.1 KB
ID:	3699878

  • #2
    I have seen rare reports of this problem. In the cases that I followed, the problem was fixed by removing the surrounding div... so no solution was found.

    You might try redefining the attributes in question for the popup classes:

    Admin CP -> Styles & Templates -> Style Manager -> Main CSS (in the menu)

    See the Popup Menu * classes. Each class has an Extra CSS Attributes box that you can use. Hopefully that helps.

    Comment


    • #3
      Thank you for your answer. After I reproduced the problem with a clean install, I decided to use a quick and dirty solution: I replaced the containing div with a table, which I was able to position without any side-effects.

      Nonetheless, I think this is something the developers should have a look into, since container-based layout is not something too exotic nowadays...

      By the way: Adding extra CSS-attributes was something I tried - in vain. Perhaps I did something wrong there, but it didn't work for me.

      Sven

      Comment


      • #4
        I also got this problem? Has anyone found a way around it besides using tables?

        Comment


        • #5
          I have not heard of any other solutions.

          Comment


          • #6
            Yes I have another solution

            Edit clientscript/vbulletin_menu.js and replace function vB_Popup_Menu.prototype.fetch_offset (line 472 in vB 3.6.4) with following function:
            Code:
            vB_Popup_Menu.prototype.fetch_offset = function(obj)
            {
            	var left_offset = obj.offsetLeft;
            	var top_offset = obj.offsetTop;
            	var obj_orig = obj;
            	var obj_menu = document.getElementById(obj.id + '_menu');
            	var i = 0;
            
            	while ((obj = obj.offsetParent) != null) i++;
            	while ((obj_menu = obj_menu.offsetParent) != null) i--;
            
            	obj = obj_orig;
            
            	while(i > 0)
            	{
            		obj = obj.offsetParent;
            		left_offset += obj.offsetLeft;
            		top_offset += obj.offsetTop;
            		i--;
            	}
            
            	return { 'left' : left_offset, 'top' : top_offset };
            };
            Would be fine if somebody could respond if it works with his style.
            Last edited by StGaensler; Tue 15th Jul '08, 3:40am. Reason: Small bug (missing semicolon) in the code

            Comment


            • #7
              Originally posted by StGaensler View Post
              Yes I have another solution

              Edit clientscript/vbulletin_menu.js and replace function vB_Popup_Menu.prototype.fetch_offset (line 472 in vB 3.6.4) with following function:
              Code:
              vB_Popup_Menu.prototype.fetch_offset = function(obj)
              {
                  var left_offset = obj.offsetLeft;
                  var top_offset = obj.offsetTop;
                  var obj_orig = obj;
                  var obj_menu = document.getElementById(obj.id + '_menu')
                  var i = 0;
              
                  while ((obj = obj.offsetParent) != null) i++;
                  while ((obj_menu = obj_menu.offsetParent) != null) i--;
              
                  obj = obj_orig;
              
                  while(i > 0)
                  {
                      obj = obj.offsetParent;
                      left_offset += obj.offsetLeft;
                      top_offset += obj.offsetTop;
                      i--;
                  }
              
                  return { 'left' : left_offset, 'top' : top_offset };
              };
              Would be fine if somebody could respond if it works with his style.


              thanks StGaensler that worked!!!

              Comment


              • #8
                StGaensler - that works great, thank you!!

                Comment


                • #9
                  Didn't see your solution until now, but as the thread-starter I feel obliged, even if a little late: Thank you, works great. One wonders, why Jelsoft wouldn't change the original file accordingly...

                  Comment


                  • #10
                    This code has a small problem which is clearly visible if the offsets are large: If a popup menu should appear e.g. on the far right side of the viewport (visible area of the website), then it comes up as expected, but is not fully visible - it is simply "cut off".

                    A customer at the german support board reported this, but I hadn't time to look up the code again to fix this little bug.

                    Stefan

                    Comment


                    • #11
                      It worked good!
                      I'll wait you fix this little bug, i have the same on my board

                      Comment


                      • #12
                        While this code works for me with my vB 3.6.0, IE now reports a JavaScript error at this line:
                        Code:
                        while ((obj_menu = obj_menu.offsetParent) != null) i--;
                        everytime a popup menu is clicked on. I tried adding a semicolon to the end of the line
                        Code:
                        var obj_menu = document.getElementById(obj.id + '_menu')
                        but that didn't fix the problem.

                        I tried using the fetch_offset function from 3.6.8 (simply overwrote the function in my 3.6.0 vbulletin_menu.js file) and experienced the same behaviour as the default vB 3.6.0 function: no JavaScript errors and works fine in FireFox but Smilies and Color Picker popup in a weird position in IE.
                        Last edited by cscgal; Wed 7th Nov '07, 11:21am.

                        DaniWeb Programming Forums
                        Computer Tech Support and Programming Forums

                        Comment


                        • #13
                          great fix. thatts been bugging me for ages.

                          Comment


                          • #14
                            And still not fixed in 3.7. This is really annoying...

                            Comment


                            • #15
                              Another vote to ask why this has still not been fixed in 3.7. Spent far too long looking to fix this with the hack above and seriously considering alternative forum package for future projects.

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X