Navigation Breadcrumb issue

MarcQuinlivan

I'm having an unusual issue with the navigation breadcrumbs on one of my sites.

As you can see in the image below the "2017" folder name is below the rest of the breadcrumb.

http://www.marcquinlivan.photography/Karting/IAME-International-Final/2017

I have been able to find the section of the code that relates to the "2017" folder name in the breadcrumb.

<li class="sm-breadcrumb-item sm-flex sm-flex-items-end sm-flex-self-end" data-is-current-page="true"><!-- react-text: 20 -->2017<!-- /react-text --></li>

This is the CSS that applies to that section.

Turning off both entries restores the "2017" folder name to the one line.

If I click into one of the galleries in the "2017" folder the entire breadcrumb is on the one line.

http://www.marcquinlivan.photography/Karting/IAME-International-Final/2017/IAME-International-Final-2017-1510-Sunday/

The .sm-flex-self-end CSS is not applied on this page.

This happens on a number of different galleries\folders but I can't see what the difference is, and as it appears to be a smugmug piece of css I don't think it is anything I have done on my end - but then again, maybe it is!

Jtring

I can repeat the the problem. It appears to happen on all folders and galleries where the breadcrumb setting "Emphasize Current Page" is "OFF". I usually have this setting "ON", but when I turn it off selectively, I get the same offset. You have it on all your folders too. No such problem for galleries. As you note, the code is different.

BUT I see this on Firefox 58.0 (just updated but I saw it on 57 too) and not on Chrome 63. The CSS shouldn't be producing that offset. So I think this is a browser bug. Were you using Firefox?

MarcQuinlivan

Thanks @Jtring .

I'm seeing it on Chrome Version 63.0.3239.132 on Windows 10 but also on Android.

You are correct, I have emphasise current page set to OFF and if I set it to ON the "2017" text gets larger and the bottom of the entire breadcrumb is aligned.

It does appear to be a bug with the formatting of the sm-flex-self-end CSS.

Jtring

I'm still on Win 7. On Chrome, as noted, I do not see any mis-alignment when the screen is at the the normal 100%, but exploring further I do see it there at 120%. I suspect on my screen at 100% there just wasn't any room for things to get mis-aligned. Allow a more few pixels and there was. I did a little on-line searching and discovered the following explains what's going on: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self (Especially see the example and picture at the bottom of the page.) The property and value pair "align-self:flex-end" is doing exactly what it's supposed to ... and it's wrong for this application. Switch to "align-self:inherit" (which is probably the default if the parameter:value isn't there) and all works. So I stand corrected. This is not a browser bug. It's a wrong value, a SmugMug coding bug affecting display in some circumstances. Probably time for someone from SmugMug to comment.

MarcQuinlivan

Yeah, the second image on that link is exactly what I'm seeing @Jtring .

Thanks. Hopefully they'll fix it soon.

In the meantime, I have fixed it with some CSS.

.sm-flex-self-end {
align-self: inherit !important;
}

leftquark

I'll pass this along to the team to investigate. Stay tuned.