Text.html with link not clickable in Edge or IE

Ask the community
,
1

I have some code that sets a link in text item (which happens to be in a repeater). So the code is like

 $item("#title").html = itemData.htmlTitle;

Where itemData.htmlTitle was set earlier to a string like
‘Text’

The result is clickable in Chrome and Firefox.
In Edge and IE they are not clickable.

The

that surrounds the tag has a style that includes pointer-events: none.

For example,

<div data-packed="true" class="style-jplrrgta" id="comp-jplrrgt2__1" style="left: 0px; width: 954px; position: absolute; pointer-events: none; top: 0px;">
<a style="font-size:18px; color:rgba(161, 177, 30, 1);" href="http://www.example.com" target="_blank" data-content="http://www.exampel.com/" data-type="external" rel="nofollow" class="">Link Text</a>
</div>

I suspect Edge and IE treat that differently. If I add pointer-events: auto; to the style of the or to a around it, it does not help as it’s not an allowed style element.

How can I change, prevent, override the pointer-events: none property on the

?
2

I tried this in Edge and it worked fine. I put a text field on my page and set the html property:
$w(‘#text1’).html = ‘Wix’;
I click on the field and it immediately redirects to wix.com.

3

Thanks. Was the text field within a repeater? That’s when I have the issue. If you inspect the page when it’s displaying, can you see if the

enclosing the text field’s html has the pointer-events style set?

4

Workaround – in the repeater, I put a transparent Shape object under (overlapped by) the text box with the link text. I add the link URL to the link property of the Shape.

It works with a few artifacts – such as when the link text is short, but the Shape is the width of the whole box just in case the link text is longer.

I’d still like to know why the

surrounding a Text element in a Repeater gets style with pointer-events: none; as that appears to make it not clickable in Edge and IE.

I also tried a Button instead of Text, which works … BUT the Button label doesn’t take html, so certain keywords cannot be bold, for example.

p.s. another bug / annoyance is that within the elements in a Repeater, you can’t arrange them by depth. When you right-click, the context menu will show the Overlapping Items, but not the Arrange menu item. It does if you select the Repeater itself, but not elements within the Repeater Item.

5

Nice work. I really like the transparent object under the text - that’s actually the best way to do it.

It still remains that there appears to be some issues with the behavior of the components in a Repeater. In fact, I there is a problem with $w.Dropdown in a repeater. I’m going to play with this some, discuss with QA, and then open some bug tickets if needed (and they probably are needed).

Thanks for your good work on this and for reporting on your progress.

6

I created a test site text with links in a repeater and you are correct - it doesn’t work in Edge (I didn’t test IE since I don’t have it).

I sent this on to QA for evaluation.

Thanks again for pointing this out.

7

HI! It is better to use

to have links working in IE/Edge. This way works for me in Repeater as well.

Wix

8

Nice! I’ll try that out and report back. Thanks!

9

Confirmed! It worked.

Note that if I set the style of the textbox in the Editor to be h6 and set the text to “…”, it did not work. But setting the text to “

…
” works.

I had been using “ …” to style the text. Something different about the classes that get applied with the <h*> compared to .

The bug may be in Edge/IE and not the Wix implementation … because both

and have an enclosing
with the pointer-events: none; style setting. (For all I know, Edge is behaving to spec and Chrome is wrong!)

In any case, THANKS for the lightweight workaround compared to a vectorimage object.