Problem with Dropdown-Menus and CSS-Layout

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • cellarius
    Senior Member
    • Aug 2005
    • 4586
    • 3.8.x

    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
  • Jake Bunce
    Senior Member
    • Dec 2000
    • 46598
    • 3.6.x

    #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

    • cellarius
      Senior Member
      • Aug 2005
      • 4586
      • 3.8.x

      #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

      • fahlsen
        New Member
        • Jun 2006
        • 5
        • 3.5.x

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

        Comment

        • Jake Bunce
          Senior Member
          • Dec 2000
          • 46598
          • 3.6.x

          #5
          I have not heard of any other solutions.

          Comment

          • StGaensler
            Senior Member
            • Jan 2005
            • 119

            #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 15 Jul '08, 2:40am. Reason: Small bug (missing semicolon) in the code

            Comment

            • nonamer69
              New Member
              • Nov 2005
              • 5
              • 3.5.x

              #7
              Originally posted by StGaensler
              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

              • Verbose
                Member
                • Jul 2005
                • 46
                • 3.0.3

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

                Comment

                • cellarius
                  Senior Member
                  • Aug 2005
                  • 4586
                  • 3.8.x

                  #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

                  • StGaensler
                    Senior Member
                    • Jan 2005
                    • 119

                    #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

                    • Fabikus
                      Member
                      • Oct 2007
                      • 65
                      • 3.8.x

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

                      Comment

                      • cscgal
                        Senior Member
                        • Aug 2003
                        • 175
                        • 3.0.0 Beta 5

                        #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 7 Nov '07, 10:21am.

                        DaniWeb Programming Forums
                        Computer Tech Support and Programming Forums

                        Comment

                        • columbusgeek
                          New Member
                          • Sep 2007
                          • 25
                          • 3.6.x

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

                          Comment

                          • cellarius
                            Senior Member
                            • Aug 2005
                            • 4586
                            • 3.8.x

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

                            Comment

                            • chubba
                              New Member
                              • Jul 2005
                              • 12

                              #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...