Mx link text decoration underline

1
Hi all, When I use a link in mendix, as soon as I use a glyphicon or an image, the underline it gets when hovered, extends to the left. This is super weird and doesn't look good at all. I tried things in css, but the underline is on the <a>, not on the text itself. Does anyone know a solution to this?   Thanks in advance
asked
3 answers
1

I've done some research.


The reason for the extended line is a whitespace in the HTML between the icon and the text.

This is not easy to remove, but can be done via JavaScript.

Something like this should do the trick

let links = document.querySelectorAll('a.mx-link');
links.forEach(link => {
    let linkText = link.innerHTML;
    let icon = linkText.substring(0, linkText.search('</span>') + 7);
    let text = linkText.substring(linkText.search('</span>') + 7);
    link.innerHTML = icon + text.trimStart();
});

 

Hope this helps!

answered
0

See https://stackoverflow.com/questions/48583982/underline-a-and-span-like-a-whole-link but it is not easily translated to the Mendix structure.

answered
0

I mean, the underline extends to the left, but I only want it under the text. But why is it extending by default? If I don't use an icon or image, the underline is only under the text, why not with an icon or image?

 

answered