Contrib.social

Breadcrumb Padding Issue

Open on Drupal.org →
Created on 27 September 2019, about 5 years ago
Updated 2 August 2024, 4 months ago

When you have breadcrumbs which don't have links for each element (i.e showing the current page as the last element, with custom code or the menu_breadcrumb module) the last element does not get any left padding after the left "/" separator. Which looks really odd!

Here was a quick css fix I implemented which may help others.

.breadcrumb a {
    padding: 0;
}

.breadcrumb li + li::before {
    /* existing bulma css
    color: #b5b5b5;
    content: "/";
    */
    /* new css */
    padding: 0 0.75em;
}

This removes the padding from the link and adds it both sides of the separator.
For touch devices, it is preferable to have more padding around an A link element, as it makes it easier to click, but I couldn't find a way to make it space correctly when the last element wasn't a link, and still keep the padding on the A.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇬🇧United Kingdom medden

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 4 months ago →
    🇮🇳India jaydeep_patel Ahmedabad

    jaydeep.jdb@gmail.com → made their first commit to this issue’s fork.

  • Merge request !15Breadcrumb Padding Issue Resolved → (Open) created by jaydeep_patel
  • Status changed to Needs review 4 months ago
  • Comment 4 months ago →
    🇮🇳India jaydeep_patel Ahmedabad

    Breadcrumb padding issue has been resolved, See attached screenshots for reference.

  • Status changed to Needs work 4 months ago
  • Comment 4 months ago →
    🇮🇳India riddhi.addweb

    I tried the issue in Simply Test Me Sandbox, but the issue has not been able to be reproduced. Attaching a screenshot without applying the patch. Please check from your end once.

  • Status changed to Needs review 4 months ago
  • Comment 4 months ago →
    🇮🇳India jaydeep_patel Ahmedabad

    Hi @riddhi.addweb,
    In your comment #5 I've checked your screenshot "BeforePatch.png". Ideally if you are in current page then it has no link in breadcrumb menu. (i.e. If you are in Article1 page then "Article1" is listed on breadcrumb menu but it does not have any link). So in this case there is spacing issue. So I've attached screenshots (With last breadcrumb menu item with link and without link) for your reference.

    Thank you!!!

  • Status changed to RTBC 4 months ago
  • Comment 4 months ago →
    🇮🇳India riddhi.addweb

    @jaydeep.jdb@gmail.com Thanks for the suggestion,
    I have reproduced the issue MR is cleanly applied and the left padding issue is now resolved. Attaching a screenshot for reference. Moving to RTBC.

    Step performed:-
    -->Install the theme and set it as the default theme.
    -->Added easy_breadcrumb module.
    -->Created article page and visited article page.
    -->Applied MR and revisited page.

  • Comment 4 months ago →
    System Message
    • mlncn → committed 116ef122 on 8.x-1.x 
      Issue #3084159 by Jaydeep_patel, riddhi.addweb, medden, mlncn:...
  • Comment 4 months ago →
    System Message
    • mlncn → committed d19c0c86 on 3.0.x 
      Issue #3084159 by Jaydeep_patel, riddhi.addweb, medden, mlncn:...
  • Status changed to Fixed 4 months ago
  • Comment 4 months ago →
    🇺🇸United States mlncn Minneapolis, MN, USA

    Added to 8.x-1.x-dev and 3.0.x-dev. Manually applied given the conflict in the compiled CSS. Separate commits for SCSS and compiling the CSS makes merge conflicts / cherry-picking easier.

    Further testing welcome before releases are made!

    Thanks again Jaydeep, and Medden, and Riddhi!

  • Comment 4 months ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024