Skip to main content
K
Karin Albrecht
Legend
July 1, 2020
Question

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

  • July 1, 2020
  • 4 replies
  • 489 views

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

 

      This topic has been closed for replies.

      4 replies

      K
      Karin AlbrechtAuthor
      Legend
      July 13, 2020

      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
      AthensSlim
      Inspiring
      July 27, 2020

      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

        K
        Karin AlbrechtAuthor
        Legend
        August 13, 2020

        Thanks Jeremy, this indeed helps 🙂

        K
        Karin AlbrechtAuthor
        Legend
        July 1, 2020

        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.

        K
        Karin AlbrechtAuthor
        Legend
        July 1, 2020

        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

        S
        Adobe Employee
        Surbhi_Maheshwari17103204
        Adobe Employee
        July 1, 2020

        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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices