Breadcrumbs interaction with extension

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Get Involved
User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Breadcrumbs interaction with extension

Post 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
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post 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.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: Breadcrumbs interaction with extension

Post 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
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post 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.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: Breadcrumbs interaction with extension

Post 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
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post by Arty »

Are those extensions available for download? This whole thing doesn't make any sense and needs some proper debugging on localhost.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: Breadcrumbs interaction with extension

Post by javiexin »

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post 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);
				}
			});
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: Breadcrumbs interaction with extension

Post by javiexin »

Thanks a lot! Great help and support!
-javiexin
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post by Arty »

Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: Breadcrumbs interaction with extension

Post by javiexin »

Not quite, now on responsive the behaviour is incorrect:
Image
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post by Arty »

Your forum looks fine to me.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: Breadcrumbs interaction with extension

Post 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...
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post by Arty »

Disable second extension, maybe its causing issues because it generates invalid HTML code.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post 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.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
Locked

Return to “[3.1.x] Styles Support & Discussion”