?
avatar PhilETaylor
PhilETaylor
4 Apr 2021

Steps to reproduce the issue

Joomla 4.0-dev
Create an article with the word "create" and the word "admin" in the body text.
Ensure the System - Highlight plugin is enabled
View the article on the frontend
Then append the url you are on with ?highlight=WyJjcmVhdGUiLCJhZG1pbiJd

WyJjcmVhdGUiLCJhZG1pbiJd = base64encode of the array ["create","admin"]

View the source code.

Expected result

The words admin and create to be highlighted.

Actual result

The HTML source is there, but no css is applied to "highlight" the terms.

<span class="highlight" rel="create">create</span>

<span class="highlight" rel="admin">admin</span>

System information (as much as possible)

Safari on mac

Additional comments

avatar PhilETaylor PhilETaylor - open - 4 Apr 2021
avatar joomla-cms-bot joomla-cms-bot - change - 4 Apr 2021
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 4 Apr 2021
avatar PhilETaylor PhilETaylor - change - 4 Apr 2021
The description was changed
avatar PhilETaylor PhilETaylor - edited - 4 Apr 2021
avatar PhilETaylor PhilETaylor - change - 4 Apr 2021
The description was changed
avatar PhilETaylor PhilETaylor - edited - 4 Apr 2021
avatar RahulJha393
RahulJha393 - comment - 4 Apr 2021

Hey !! I would love to contribute to this. How can I share my code to help you highlighting the terms (i.e. "create" and "admin") . Kindly guide me

avatar prajjwal1231
prajjwal1231 - comment - 4 Apr 2021

Hey @PhilETaylor
I would like to contribute in this issue Pls assign it to me
& can you brief me in which color you want it to be highlighted.

avatar infograf768
infograf768 - comment - 5 Apr 2021

@PhilETaylor
the css exists but there is an error in it. Error comes from finder.css

we have

.result__item .highlight::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% + 6px);
    height: calc(100% + 2px);
    background: hsla(60, 100%, 50%, .5);
    pointer-events: none;
    border-radius: 3px;
}

Looks like taking off z-index: -1; solves the issue. z-index can't work here as the body background is set to white.

highlight

Change has to be done in

avatar RahulJha393
RahulJha393 - comment - 5 Apr 2021

I have done the changes RahulJha393@2f951b8
hope this solves the issue

avatar infograf768
infograf768 - comment - 5 Apr 2021

@RahulJha393
This is the wrong place. The issue is for J4 and not J3/staging

The change would have to be done in

Then make a PR towards 4.0-dev
and then use npm to test.

avatar infograf768
infograf768 - comment - 5 Apr 2021

Another solution is to add z-index: -2; to the body.
@drmenzelit @chmst What do you think?

Ref which created this issue: 5725cbf#diff-a4d0ce450acf901b0a318d7e5dd759f1d3167cbc756c0be6c98bb1d125ed23db

avatar RahulJha393
RahulJha393 - comment - 5 Apr 2021

@infograf768 Oops! OK let me check this out

avatar infograf768
infograf768 - comment - 5 Apr 2021

@RahulJha393
Let's wait feed back from @drmenzelit @chmst

avatar drmenzelit
drmenzelit - comment - 5 Apr 2021

z-index: -2 for body can have unexpected side effects, so I think removing z-index: -1 for highlight should be ok.
The finder.css file was refactored by @hans2103 some months ago.

avatar infograf768
infograf768 - comment - 5 Apr 2021

@RahulJha393
You got your answer. You can make the PR. :)

avatar infograf768
infograf768 - comment - 7 Apr 2021

@RahulJha393
Will you do the PR ?

avatar sandramay0905
sandramay0905 - comment - 8 Apr 2021

@prajjwal1231

I would like to contribute in this issue Pls assign it to me

please read #31540 (comment)

avatar himanshu007-creator
himanshu007-creator - comment - 8 Apr 2021

if @prajjwal1231 is inactive, so should i proceed with the PR?

avatar drmenzelit
drmenzelit - comment - 8 Apr 2021

@himanshu007-creator first come, first serve ;-)

avatar rjharishabh
rjharishabh - comment - 10 Apr 2021

@infograf768
I am not getting any CSS that is applied to the highlight class. Is there anything that is missing.

highlight

avatar dgrammatiko
dgrammatiko - comment - 10 Apr 2021

Please test: #33089

avatar Quy Quy - change - 10 Apr 2021
Status New Closed
Closed_Date 0000-00-00 00:00:00 2021-04-10 14:04:12
Closed_By Quy
avatar Quy Quy - close - 10 Apr 2021

Add a Comment

Login with GitHub to post a comment