After updating, collapse icon is displayed on the left side overlapping text

Created on 20 September 2024, 3 months ago
Updated 21 September 2024, 3 months ago

Problem/Motivation

After updating, collapse icon is displayed on the left side overlapping text. Can't fix icon placement.

Steps to reproduce

1. Install Collapsiblock (4.3 & drupal core 10.3.5)
2. Configure collapsiblock on a block (in this case, solr search facets)
3. Observe the block on the page

Observed Result:
The block arrow is now located on the left side, overlapping text.
It appears to be caused by the background image placement in the css:

.collapsiblockTitleCollapsed button {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEUBawAAAACA2Sw2AAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAUSURBVHicY1BgMGCwYLABYgMGBQAJIgFNAWOT0AAAAABJRU5ErkJggg==) no-repeat left;
}

^ the "left" at the end of the css is causing this.

Adjusting the css to be "no repeat right" instead of left fixes the issue

Proposed resolution

the button icon is displayed properly.
Perhaps an option for users to be able to control the placement if this is intentional

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Needs review

Version

4.3

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @sbrenner02
  • Assigned to darvanen
  • 🇦🇺Australia darvanen Sydney, Australia

    Wow ok, yeah I have to figure out how the rtl css was triggered way back when it wasn't bundled like it is now, I guess I assumed that css file had some wrapper classes in it!

  • Merge request !38Remove reference to legacy rtl css → (Merged) created by darvanen
  • Issue was unassigned.
  • Status changed to Needs review 3 months ago
  • 🇦🇺Australia darvanen Sydney, Australia

    I've removed the reference to the rtl css. I can't find evidence of that having been in use for a VERY long time.

    Clearly there was intential to support RTL languages at some point, I'm going to open a feature request to revive that.

    Setting to 'Needs review'

  • 🇦🇺Australia darvanen Sydney, Australia

    Alrighty, tests are green, I'd really love a manual confirmation that this fixes the reported issue in the theme you're using.

  • 🇦🇺Australia darvanen Sydney, Australia

    Follow-up: RTL support Postponed

  • I pulled down the MR build and refreshed my local files, the issue is still occurring locally for me.

  • Pipeline finished with Skipped
    3 months ago
    #296911
    • darvanen committed 6ef105c7 on 4.x
      Issue #3475835 by darvanen, sbrenner02: After updating, collapse icon is...
  • 🇦🇺Australia darvanen Sydney, Australia

    That is exceedingly strange, the build CSS no longer contains the 'left' directive:

    .collapsiblockTitle button {display: block;width: 100%;padding: 0;cursor: pointer;text-align: left;color: #0071b3;border: none;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABJJREFUeJxj+MdQw2DBIMAABgAUsAHD3c3BpwAAAABJRU5ErkJggg==) no-repeat right}
    .collapsiblockTitle button:hover {color: #018fe2}
    div .collapsiblockTitleCollapsed button {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEUBawAAAACA2Sw2AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfWBBkTFRtzktmWAAAAFElEQVR42mPgYJBgsGCoAGIJBg4ACCYBKWEREuIAAAAASUVORK5CYII=) no-repeat right}
    .collapsiblockContent {overflow: hidden}
    

    Could I ask if you cleared your cache after pulling the MR?

    I've committed this so perhaps you could pull the dev version just to confirm you have the right code?

  • Merge request !39add RTL support → (Closed) created by darvanen
  • 🇦🇺Australia darvanen Sydney, Australia

    Oh dear, I'm all sorts of messed up today, ignore that commit, I intended it for a different branch.

    • edce0983 committed on 4.2.x
      Issue #3475835 by darvanen, sbrenner02: After updating, collapse icon is...
  • 🇦🇺Australia darvanen Sydney, Australia

    Backported to 4.2.x

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

Production build 0.71.5 2024