1

I wanted to change the way the standard print/email function in Joomla worked, where I wanted to change it from being a drop-down to stand alone icons.

In a template override I changed the code for this from:

        <?php if ($canEdit || $displayData['params']->get('show_print_icon') || $displayData['params']->get('show_email_icon')) : ?>
        <div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span> <span class="caret"></span> </a>
            <?php // Note the actions class is deprecated. Use dropdown-menu instead. ?>
            <ul class="dropdown-menu">
                <?php if ($displayData['params']->get('show_print_icon')) : ?>
                    <li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($displayData['params']->get('show_email_icon')) : ?>
                    <li class="email-icon"> <?php echo JHtml::_('icon.email', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($canEdit) : ?>
                    <li class="edit-icon"> <?php echo JHtml::_('icon.edit', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
            </ul>
        </div>
    <?php endif; ?>

To:

        <?php if ($canEdit || $displayData['params']->get('show_print_icon') || $displayData['params']->get('show_email_icon')) : ?>
        <div class="pull-right">
                <?php if ($displayData['params']->get('show_print_icon')) : ?>
                    <li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($displayData['params']->get('show_email_icon')) : ?>
                    <li class="email-icon"> <?php echo JHtml::_('icon.email', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($canEdit) : ?>
                    <li class="edit-icon"> <?php echo JHtml::_('icon.edit', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
            </ul>
        </div>
    <?php endif; ?>

<?php else : ?>

This takes the print and email icons out of the tag and shows them as stand alone icons in a vertical list.

How can can I make the print/email icons displaying horizontally instead of vertically?

1

Firstly, you have remove the dropdown, but you are still using list items. So you need to change the <li> tags to <div> tags.

Once done, I would suggest adding a class to your parent element, like so:

<div class="pull-right actions">

Then using CSS:

.actions > div {
    display: inline-block;
}

Either that or simply remove the dropdown-menu class from your <ul> element and make sure all <li> elements are floated to the left.

Hope this helps

  • Thank you. However the CSS "display: inline-block" didn't seem to have any effect on it. But using the CSS "display: inline-flex" made it horizontal :) – Hammur Oct 12 '14 at 20:22
1

There's no reason these links shouldn't still be list items. It is a list of links and has always been coded as such in Joomla.

I think it would be preferable to use a simple utility class, changing

<ul class="dropdown-menu">

To:

<ul class="inline"> // Following BS2.3 syntax

or:

<ul class="list-inline"> // BS3 syntax

This get's the correct result with less code, more precision and better semantics.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.