div id=dbTmContent line wrap problem

Here's a screenshot of what many of my box header content menus look like with a template other than unity.  This is in FF... IE seems to work OK.  Note the area highlighted in blue, where the rest of the content menu has wrapped to the line below and is not displayed in the box header area.  Apparently the width of this dive is calculated dynamically, but it doesnt have quite enough width to display properly in FF with my template.  How do I add a little more width to this div?  If I add jus one more px to the width in firebug the linewrap goes away.

hello HL.

which mod is this on your site that can invite contacts from any webmail ?? if you dont mind me asking.

is it somethins u hyave done for ur site only or is it a modification i can do on my site.

i would ;ove to hav it on my site.

regards

mchauhan

me too!

Hello HL.

think u havnt this post yet..

regards

mchauhan

Bump for an answer

I really hate this crap.  Everything's fine as long as you use the uni template, but just try to use a different one and stuf breaks.  You got widths and heights of stuff all over the place calculated by some obscure js somewhere in the 5,000 files, and if it doesn't work right... you're screwed.

I just love coming on this site and making posts to myself.

Anybody got a clue? I've been trying to figure this out for 4 F#@!!ng days now..

HL, do me a favor.  Give me a screenshot of it working good in IE and one of it broken in FF so I can see the differences between them.  Right now I'm not sure if your talking about "All Men" and "Day" or something else. 

Can't help if I can't see for sure what your looking at. 

The screen shot already shows what I'm talking about, but I'll clarify a bit.  In the div hightlighted in blue, should be 'All', 'Men' and 'Women'.  These should all be displayed on the same line in the box header, but instead. 'Women' is wrapped to the line below.  This is in FF.  In IE, all 3 items are displayed on one line within the constraints of the box header.

The width of this div is calculated within the function dbTopMenuLoad(iId) function, in inc/js/functions.js.

function dbTopMenuLoad(iId) {
var oTopMenu = $('#dbTopMenu' + iId);
var iOuterWidth = oTopMenu.parent('.boxFirstHeader').width() - oTopMenu.siblings('.dbTitle').width() - 10;
if(iOuterWidth == -10)
return;

var iInnerWidth = 0, iSelectedOffset = 0;
$.each(oTopMenu.find('.dbTmContent > div:visible:not(.clear_both)'), function() {
if($(this).hasClass('active'))
iSelectedOffset = -iInnerWidth;

iInnerWidth += parseInt($(this).outerWidth());
});           
oTopMenu.find('.dbTmContent').width(iInnerWidth);           

if(iOuterWidth >= iInnerWidth) {
oTopMenu.find('.dbTmLeft, .dbTmRight').hide().siblings('.dbTmCenter').width(iInnerWidth);
oTopMenu.width(iInnerWidth);
}
else {
oTopMenu.find('.dbTmCenter').width(iOuterWidth - 2 * oTopMenu.find('.dbTmLeft').outerWidth());
oTopMenu.width(iOuterWidth);

var iSelectedOffsetMin = parseInt(oTopMenu.find('.dbTmCenter').width()) - parseInt(oTopMenu.find('.dbTmContent').width());
if(iSelectedOffset < iSelectedOffsetMin)
iSelectedOffset = iSelectedOffsetMin;
oTopMenu.find('.dbTmContent').css('left', iSelectedOffset + 'px');
}

oTopMenu.css('top', '0px');
}


I can't figure out, what in the function, is not working properly in FF, but works fine in IE.  Usually, things are the other way around.

hmm looks fine in ff 3.5.6

Interesting.  My version of FF is 3.0.13

I'd really hate to call this a browser problem though.

@ prolaznik....

Do me a favor.  Go to your site in FF, and zoom in one level (Ctrl +), and tell me if anything happens to your various db Top Menus.

I've been chasing a ghost.  I thought I was the only one with this problem, but it seems ALL D7 sites have the same issue.

To verifify that this is everyone's problem, go to your D7 homepage in FF, zoom in one level (Ctrl +), then refresh the page (Ctrl F5).

Post in this thread if the items on the right of some of your db Top Menus disappear from view.  It looks like the js resizing of this div, does not play well the the zoom function of FF.  IE is no problem.

why not make them align to the left instead right ?..

Now that I know the problem is common to all D7 sites, including demozzz.com....

http://www.boonex.com/trac/dolphin/ticket/1668

Thanks prolaznik.  It would never have occurred to me, to check this with the FF zoom function until you posted that SS.

now go back to my site and try it again let me know what you see zoom in as many times & refresh the page

I don't think that will make a difference, since the div width will still be calculated the same way in dbTopMenuLoad

Very nice.  Could you end the suspense and tell me what you changed?

it's b.s   i messed up now :(

I thought I saw it working for a while.

Ctrl + not working

Ctrl + & refresh then it works

C'mon guys.  I know there's a javascript guru here somewhere that can figure out why the autosizing of the dbTopMenu doesn't play well with the FF zoom function.  I wrote a ticket for this, but I'm getting impatient.

To see the problem, go to any D7 site and watch what happens to your db Top menus as you zoom in and out with Firefox.  Again, the div width is calculated within the dbTopMenuLoad function shown above.

One of my favorite things to do late at night, is make posts to myself in this thread.

HL, Women is nowhere in your screenshot, that's why we couldn't see it. 

MD, just go to your own D7 site and zoom in and out with FF.  You'll see the problem.

Got a complaint about this issue and went to this post. The problem does exist, and it is annoying.

In case anybody's interested, I'm using the code below as a temporary workaround until an official fix from Booonex

function dbTopMenuLoad(iId) {
var oTopMenu = $('#dbTopMenu' + iId);
var iOuterWidth = oTopMenu.parent('.boxFirstHeader').width() - oTopMenu.siblings('.dbTitle').width() - 10;
if(iOuterWidth == -10)
return;

var iInnerWidth = 0, iSelectedOffset = 0;
$.each(oTopMenu.find('.dbTmContent > div:visible:not(.clear_both)'), function() {
if($(this).hasClass('active'))
iSelectedOffset = -iInnerWidth;

iInnerWidth += parseInt(($(this).outerWidth()),10)+8;
});           
oTopMenu.find('.dbTmContent').width(iInnerWidth);           

if(iOuterWidth >= iInnerWidth) {
oTopMenu.find('.dbTmLeft, .dbTmRight').hide().siblings('.dbTmCenter').width(iInnerWidth);
oTopMenu.width(iInnerWidth);
}
else {
oTopMenu.find('.dbTmCenter').width(iOuterWidth - 2 * oTopMenu.find('.dbTmLeft').outerWidth());
oTopMenu.width(iOuterWidth);

var iSelectedOffsetMin = parseInt((oTopMenu.find('.dbTmCenter').width()),10) - parseInt((oTopMenu.find('.dbTmContent').width()),10);
if(iSelectedOffset < iSelectedOffsetMin)
iSelectedOffset = iSelectedOffsetMin;
oTopMenu.find('.dbTmContent').css('left', iSelectedOffset + 'px');
}

oTopMenu.css('top', '0px');
}

It's not perfect, but it will keep the dbTopMenu text from wrapping when using the FF zoom function.