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
'<a href="http://....">Text</a>'
The result is clickable in Chrome and Firefox.
In Edge and IE they are not clickable.
The <div> that surrounds the <a> 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 <a> or to a <span> 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 <div> ?
HI! It is better to use <h1></h1> to have links working in IE/Edge. This way works for me in Repeater as well.
<h1><a href='http://wix.com'>Wix</a></h1>
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 <div> 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.
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 <div> enclosing the text field's html has the pointer-events style set?
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 = '<font size=18><a href="http://wix.com">Wix</a></font>';
I click on the field and it immediately redirects to wix.com.