I noticed the icons are only added next to links with the display set to inline. I modified the code for my site so the icons are added next to links with a display setting of inline-block. This was easy to do by changing

	$(external_links).not($(external_links).find('img').parents('a')).addClass(Drupal.settings.extlink.extClass).each(function() { if ($(this).css('display') == 'inline') $(this).after('<span class=' + Drupal.settings.extlink.extClass + '></span>'); });

to

  	$(external_links).not($(external_links).find('img').parents('a')).addClass(Drupal.settings.extlink.extClass).each(function() { if ($(this).css('display') == 'inline' || $(this).css('display') == 'inline-block') $(this).after('<span class=' + Drupal.settings.extlink.extClass + '></span>'); });

on line # 88 in the extlink.js file.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

elachlan’s picture

I would have to check with quicksketch, I think we were avoiding block elements for a reason.

quicksketch’s picture

We have avoided inline-block in the past because it didn't render properly in older IE versions. At this point, I don't think that's a problem any more. However, as usual when it comes to changing our CSS, we should check this in all browsers after making a change. That includes IE8/9/10 and Opera.

elachlan’s picture

cby016, put together a patch and I will include it.

elachlan’s picture

Version: 7.x-1.13 » 7.x-1.x-dev
bensey’s picture

Hey all,

I noticed today that the icons were not displaying correctly for me in any browser (well, IE10 and latest Chrome + Firefox), and found this thread.
I noticed that all the links had the "inline-block" classes, which caused the icon to not display for me.

It seems that the code in extlink.js - lines 114-118 is assigning the "inline-block" class. Should it be? It's commented as an IE workaround.
For now I've had to delete the "-block" component so this module functions correctly.

Cheers,
Ben.

elachlan’s picture

Thanks for the report Bensey!

@quicksketch - can't we just remove the if for $link.css('display') == 'inline'?

Or does it have to be both inline and inline-block?

elachlan’s picture

Actually after reading this link: http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-...

We should keep the if and add 'inline-block'.

elachlan’s picture

Status: Active » Needs review
FileSize
653 bytes

Here is a patch. Let me know if that fixes the problem.

notmike’s picture

By giving span.ext a height value of 10 pixels in my theme CSS, I was able to overcome the problem introduced by the inline-block change in 1.13. The icon had disappeared across all browsers, and this allowed the icon to reappear.

I was glad that I did not have to use !important in my theme CSS to override the inline CSS and change it back to display:inline. I am not sure what problem the addition of display: inline-block was supposed to solve.

elachlan’s picture

notmike - There was no change that effected inline-block in 7.x-1.13. Adding of inline-block is supposed to allow users to have external links display when an anchor tag has a parent element or contains the attribute for inline-block.

Has anyone been able to review/test this?

elachlan’s picture

Tested with:
Chrome 29
Firefox 22
IE 10

elachlan’s picture

Status: Needs review » Patch (to be ported)

Committed to Git. Needs port to 6.x and 8.x.

bensey’s picture

Works beautifully thanks!

essbee’s picture

I am experiencing the same behaviour as notmike, that is the addition of the "inline-block" tag has meant the icon is no longer displaying.

meecect’s picture

With 'inline-block', the icon does not show for me, testing in Chrome. Display=: 'inline' does work, however.

I'm using a custom sub-theme of Bootstrap, if that helps and Drupal 7.21

flatfeat’s picture

Same here as #15. I have to use CSS in my theme and set the .ext class to display: inline in order for it to show up in the latest version of Chrome. Using Omega 4 Theme.

camhoward’s picture

Issue summary: View changes

The external link icon does not display in themes or sub-themes that import the Compass "toolkit/border-box" -- there seems to be a conflict between the Compass code fixing border box issues and the workaround for IE box model problems in the extlink.js file.

See the issue at https://drupal.org/node/2191999 for more info. It was originally thought this was an issue with Omega 4 sub-themes, but it is actually an issue with the Compass toolkit. Hope this helps.

alexkb’s picture

FileSize
883 bytes

Out of box the bootstrap theme doesn't use compass, so I don't think we should be looking there.

Bootstrap in Drupal requires jQuery 1.7+, via the jquery_update module which has 1.7.1 baked in. However according to this report the $.support.boxModel call is buggy in 1.7.1. You can open up your Chrome (which of course does support the boxModel) console and do a: console.log(jQuery.support.boxModel); You should see FALSE, but in any other Drupal site with another version of jQuery will return TRUE, in Chrome.

This snippet of code in extlink is trying to cater for IE7 which as far as the net is concerned is dead.

So attached is a patch to remove this code.. but perhaps a patch isn't really needed for such things ;)

quicksketch’s picture

@alexkb: The problem you're describing was fixed in #2124457: compatibility of jquery >=1.9.

DamienMcKenna’s picture

Version: 7.x-1.x-dev » 8.x-1.x-dev

Moving to the correct branch.

elachlan’s picture

Version: 8.x-1.x-dev » 6.x-1.x-dev

Done in 8.x but not 6.x

elachlan’s picture

Status: Patch (to be ported) » Closed (won't fix)