Hi,
I wish the list of attached files appeared like in the JCE input area
but it actually shows like this
Here is the auto-generated code:
<p><a href="images/allegati/Allegato-3-Scheda-di-sintesi-2021.pdf" target="_blank" class="wf_file"><img src="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
I wish the list of attached files appeared like in the JCE input area
but it actually shows like this
Here is the auto-generated code:
<p><a href="images/allegati/Allegato-3-Scheda-di-sintesi-2021.pdf" target="_blank" class="wf_file"><img src="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
Accepted Answer
Your template stylesheet includes the following css rule for images:
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:
or
or
The last one specifically targets the file link icon.
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.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
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.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Hi, thank you for your reply.
Here a page with the issue, but it occours on any single page in the site.
Here a page with the issue, but it occours on any single page in the site.
Accepted Answer
Your template stylesheet includes the following css rule for images:
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:
or
or
The last one specifically targets the file link icon.
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.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Perfect, thank you Ryan.
I forgot to tell you I use Helix Framework, it should have helped.
Andrea
I forgot to tell you I use Helix Framework, it should have helped.
Andrea
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!