You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

#110932 icon and file name not on the same line with File Manager

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Galenos on Tuesday, 03 May 2022 10:39 BST

Monday, 02 May 2022 14:45 BST

Galenos
Hi,
I wish the list of attached files appeared like in the JCE input area https://www.awesomescreenshot.com/image/26551438?key=2d6217f59b2daa42a91029ad7ba0675d
but it actually shows like this https://www.awesomescreenshot.com/image/26551557?key=b06d264af46e3c831fae5309df3c385e

Here is the auto-generated code:
<p><a href="https://www.joomlacontenteditor.net/images/allegati/Allegato-3-Scheda-di-sintesi-2021.pdf" target="_blank" class="wf_file"><img src="https://www.joomlacontenteditor.net/media/jce/icons/pdf.png" alt="pdf" class="wf_file_icon" style="border: 0px; vertical-align: middle; max-width: inherit;" /><span class="wf_file_text">Allegato 3. Scheda di sintesi 2021</span></a></p>

What am I supposed to edit (once!) in order to have pdf icon and file name on the same line?

Thank you
Andrea

Attachments

how it should appear.png

Monday, 02 May 2022 16:42 BST

Ryan
I suspect this is caused by some css in your site's template. Please post a link to an example article containing these links on your site.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 02 May 2022 17:00 BST

Galenos
Hi, thank you for your reply.
Here a page with the issue, but it occours on any single page in the site.

Tuesday, 03 May 2022 09:39 BST

Ryan
Your template stylesheet includes the following css rule for images: 

img {
  display: block;
  max-width: 100%;
  height: auto;
}
The display:block style is what is forcing the image to be on a new line. You can fix this in a number of ways: Add the any of the following to your template stylesheet: 

img {
  display: inline-block;
}
or 

a img {
  display: inline-block;
}
or 

img.wf_file_icon {
  display: inline-block;
}
The last one specifically targets the file link icon.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 03 May 2022 10:39 BST

Galenos
Perfect, thank you Ryan.
I forgot to tell you I use Helix Framework, it should have helped.

Andrea