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

CommentFileSizeAuthor
Screenshot 2024-09-20 at 10.20.43 AM.png6.14 KBsbrenner02

Issue fork collapsiblock-3475835

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

sbrenner02 created an issue. See original summary.

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Assigned: Unassigned » darvanen

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!

darvanen opened merge request !38

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Assigned: darvanen » Unassigned
Status: Active » Needs review

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'

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented

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

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Related issues: +#3475907: RTL support

Follow-up: #3475907: RTL support

sbrenner02’s picture

sbrenner02 commented

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

  • darvanen committed 6ef105c7 on 4.x 
    Issue #3475835 by darvanen, sbrenner02: After updating, collapse icon is...
darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Version: 4.3.0 » 4.x-dev

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?

darvanen opened merge request !39

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented

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

darvanen closed merge request !39

  • edce0983 committed on 4.2.x 
    Issue #3475835 by darvanen, sbrenner02: After updating, collapse icon is...
darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Status: Needs review » Fixed

Backported to 4.2.x

Status: Fixed » Closed (fixed)

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