RH2019 new UI Responsive HTML - missing space in front of breadcrumb separator

[Karin Albrecht]

Hi all,

I am using RH2019 new UI, update 14. I am generating a responsive HTML output using a master file with breadcrumbs. Until update 12, my breadcrumb separators had a space in front of them on all "levels" (e. g. Home > First_Folder > Second_Folder > Current_Topic). That is how I want it to look like. 

Since upddate 13, the space is only applied in front of the first separator after "Home", for the others, the space is missing. My breadcrumb now looks like this: (Home > First_Folder> Second_Folder> Current_Topic). So, the space between "Folder" and the separator is missing. Is there anything I can do to get it back? I have been playing around with the master page, but with no luck so far.

Thanks and best regards
Karin

[Surbhi_Maheshwari]

Hi Karin,

I tried this and space before/after separator is coming in Responsive HTML5 output.

Can you please check that your master page source code has space before and after the separator like:

<span class="separator" data-type="separator"> &gt; </span>

Please check and let us know to investigate this issue further. If possible please share the master page containing this breadcrumb from Update 12 as well as 13 at sumahesh@adobe.com

Regards,

Surbhi Maheshwari

[Karin Albrecht]

Hi Surbhi,

ha, thank you, that did the trick. The space in the code was not necessary previously and is also not added automatically, when creating a new master page and adding a breadcrumb there. Plus, adding the space before and after the separator looks a little bit strange in the edit mode of the master page, because then a space is also written in front of the first word "Home".

But in the output it looks fine now. I will add the spaces in the code in all my projects.

Thank you!

Kind regards
Karin

[Karin Albrecht]

Gnarf - the output is no longer looking fine as soon as I use my CSS. I will contact you via e-mail, Surbhi, and provide test files as well.

[Karin Albrecht]

I think I could further determine what the problem is. 

I do get the separator with spaces before and after when I create a new master page and use this. However, as soon as I assign my css to this master page, it no longer works.

Part of the problem seems to be that since update 13 or 14, the breadcrumbs are inserted with an <ol> tag. In my css, <ol> is defined with numbers, so I get this number also in the breadcrumb. As I have it right aligned, the number is displayed on top of the text.

In the code of my “old” master page, no <ol> tag is found. But here, when I add the space before and after the separator, this does not work.

My workaround for now is to create the <ol> style without numbers and indent and assign this to the breadcrumb. This means, I have to check all other places where the <ol> is used and verify they are changed to another tag with numbering. However, I do not understand why an <ol>-tag would be needed at all for the breadcrumb.

I provided this info as well as test files to Surbhi on July 1st, but did not get any answer so far.

So, maybe someone else has an idea how to fix this or at least has observed similar issues?

Best regards
Karin

[AthensSlim]

Karin-

I came here looking for the answer to the same question and saw your post. Your previous breakdown at least helped give me someplace to look and things to think about. 

What I found in my case is that the "intermediate" hyperlinks in the breadcrumbs are assigned the "breadcrumbs-link" class. I was therefore able to modify my stylesheet to add some padding to this class to help normalize the appearance. That seems to have worked in my case. 

I added the following to my CSS

a.breadcrumbs-link {
  margin-right: 6px;
}

You may need to play with the margin value a bit to get a result you're happy with, but hopefully, this works for you also.

Hope this helps,

Jeremy

[Karin Albrecht]

Thanks Jeremy, this indeed helps 🙂