Page 1 of 2

Breadcrumbs interaction with extension

Posted: Fri Mar 27, 2015 6:57 pm
by javiexin
Hi,

I have a problem with the behaviour of breadcrumbs when interacting with one/two extensions. Specifically, the extensions (Navbar Search and/or Google Search) occupy some space on the right of the breadcrumbs line, and then the way breadcrumbs "narrow" (but not as much as to make responsive take over) is somewhat odd. Let me show what I mean (an image is worth a thousand words ;) ):
Image

There is something, probably in some JS, that is not interacting correctly with these extensions, but I fail to identify what.

Personally, I would remove the Google search (or replace by an icon) as soon as needed (similar to what happens in the top line of the Navbar with the "Notifications" and "Private messages" labels), and would reduce the advanced search to an icon as well even before responsive behavior kicking in.

Alternatively, the breadcrumbs could be replaced by a dropdown menu (like the Quick Links above it).

Could anyone help?
Thanks a lot!
-javiexin

Re: Breadcrumbs interaction with extension

Posted: Fri Mar 27, 2015 8:11 pm
by Arty
Most likely container for those search boxes has fixed width or just very wide width, taking way more space than its supposed to.

I recommend not putting search boxes there at all. It will cause issues. For example, look at breadcrumbs when viewing this topic on desktop - there is not enough space for your search boxes in breadcrumbs row because breadcrumbs has 4 elements.

There is not enough space for it.

Re: Breadcrumbs interaction with extension

Posted: Fri Mar 27, 2015 8:58 pm
by javiexin
There must be something more to it...

Let's see an example:

Code: Select all

<ul id="nav-breadcrumbs" class="linklist navlinks" role="menubar">
	<li style="max-width: 112px;" class="small-icon icon-home breadcrumbs wrapped">breadcrumbs</li>
	<li class="rightside responsive-hide">this is one search box</li>
	<li class="rightside responsive-hide">this is the other search box</li>
</ul>
In this case, the widths are as follows:
  • total window width: 808px
    • nav-breadcrumbs: 716px
      • breadcrumbs: 112px (notice the max-width attribute, that is dynamically changed)
      • left search box: 207px
      • right search box: 180px
Therefore, white space in between: around 200px that are not used at all... So, the breadcrumbs may be much wider that 112px.

Also, what I would like is to remove completely one of the search boxes when there is not enough space, and turn the second one by an icon as well (same as is done on responsive).

Thanks a lot,
-javiexin

Re: Breadcrumbs interaction with extension

Posted: Fri Mar 27, 2015 10:01 pm
by Arty
This is weird. Do you have big left or right margin in any of these search boxes?

I've looked at code that generates that max-width, it counts margin and padding when calculating value. So I think there is a big margin in one of those <li> elements. Check them with Firebug or developer tools to see their exact widths, padding and margins.

Re: Breadcrumbs interaction with extension

Posted: Fri Mar 27, 2015 10:11 pm
by javiexin
No, 7px each of margin, 14px total. What MAY be happening is that there are TWO more <li> elements, but are hidden in "normal" view (class responsive-search), and those widths may be counted for as well? The behaviour in responsive mode is weird as well, with even wider "blank" space.

Thanks for your help!
-javiexin

PS: I am using Firebug :) checking, the box-model for each element. Test forum at http://www.exincastillos.es/jxmods

Re: Breadcrumbs interaction with extension

Posted: Fri Mar 27, 2015 11:06 pm
by Arty
Are those extensions available for download? This whole thing doesn't make any sense and needs some proper debugging on localhost.

Re: Breadcrumbs interaction with extension

Posted: Fri Mar 27, 2015 11:33 pm
by javiexin

Re: Breadcrumbs interaction with extension

Posted: Sat Mar 28, 2015 12:04 am
by Arty
Its a bug in forum_fn.js. Code checks all links, including hidden links.

Find

Code: Select all

			$right.each(function() {
				width += $(this).outerWidth(true);
			});
replace with

Code: Select all

			$right.each(function() {
				if ($(this).is(':visible')) {
					width += $(this).outerWidth(true);
				}
			});

Re: Breadcrumbs interaction with extension

Posted: Sat Mar 28, 2015 12:10 am
by javiexin
Thanks a lot! Great help and support!
-javiexin

Re: Breadcrumbs interaction with extension

Posted: Sat Mar 28, 2015 9:39 am
by Arty

Re: Breadcrumbs interaction with extension

Posted: Sat Mar 28, 2015 12:15 pm
by javiexin
Not quite, now on responsive the behaviour is incorrect:
Image

Re: Breadcrumbs interaction with extension

Posted: Sat Mar 28, 2015 12:19 pm
by Arty
Your forum looks fine to me.

Re: Breadcrumbs interaction with extension

Posted: Sat Mar 28, 2015 12:58 pm
by javiexin
I have reverted your latest fix, but I see another issue (related, but probably different), that is what was causing my previously reported problem. This happens both with and without your latest (more complete) fix.

I think that, when switching from non-responsive to responsive (ie, 700px wide), there is NO resize recalculation for breadcrumbs, while the EXTs change dramatically the widths. So, the max-width parameter is maintained, and hence the white space between breadcrumbs and search boxes.

BR,
-javiexin

PS: I wish I could help more with JS/jQuery debugging, but I am no expert at all...

Re: Breadcrumbs interaction with extension

Posted: Sat Mar 28, 2015 1:23 pm
by Arty
Disable second extension, maybe its causing issues because it generates invalid HTML code.

Re: Breadcrumbs interaction with extension

Posted: Sat Mar 28, 2015 1:27 pm
by Arty
Arty wrote:Disable second extension, maybe its causing issues because it generates invalid HTML code.
Never mind about that. On your forum HTML code is correct. Looks like you've already fixed that extension bug.

And that screenshot is correct. Breadcrumbs behave that way on small devices, its not a JavaScript issue. That behavior is set in CSS.