Search code examples
jqueryjquery-tabs

jQuery tab ui won't combine title and icon

Using the Squelch tabs plugin (http://wordpress.org/support/plugin/squelch-tabs-and-accordions-shortcodes), this code puts an icon into the tab instead of the title.

Adding a title with the icon, the title moves to the right of the image instead of beneath. How can I make the title appear directly below the image instead of being shunted to the side?

This doesn't seem to be a css problem but if you think so I'll post the css.

// Build the tab
$rv  = '';
$rv .= '<li class="squelch-taas-tab">';
$rv .= '<a href="#squelch-taas-tab-content-'.$taas_current_tab_group.'-'.$taas_tab_content_counter.'">';

if (!empty($atts['icon'])) {
    if (empty($atts['iconalt'])) $atts['iconalt'] = $atts['title'];

    $rv .= '<img src="'.$atts['icon'].'" alt="'.$atts['iconalt'].'" class="squelch-taas-tab-icon" ';

    if (!empty($atts['iconw'])) $rv .= 'width="'.$atts['iconw'].'" ';
    if (!empty($atts['iconh'])) $rv .= 'height="'.$atts['iconh'].'" ';

    $rv .= '/> &nbsp;';
}

$rv .= $atts['title'];
$rv .= '</a>';
$rv .= '</li>';
$tab_arr['tab'] = $rv;

css (first section from jquery-ui-1.9.2.custom.css, Tabs section from the squelch tabs css): 

.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px 0 0 0; border-bottom: 1px; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }

/* Tabs */
.squelch-taas-tab-group .ui-tabs-panel:after {
content: ".";
display: block;
height: 180px;
line-height: 0;
clear: both;
visibility: hidden;
zoom: 1;
}

shortcode:

[tabs title="The Team" disabled="false" collapsible="true" active="0" event="click"]
[tab icon="example.jpg" title="Tab Title 1"]

html: 

<h2 id="squelch-taas-title-0" class="squelch-taas-group-title">The Team</h2>
<div id="squelch-taas-tab-group-0" class="squelch-taas-tab-group" data-title="The Team" data-disabled="false" data-collapsible="true" data-active="0" data-event="click">
<ul>
    <li class="squelch-taas-tab">
        <a href="#squelch-taas-tab-content-0-0">
            <img src="http://www.example.com/image1.jpg" class="squelch-taas-tab-icon" /> &nbsp;Tab Title 1</a>
    </li>
</ul>
... </div>
Solution

  • OK, simple solution as it turns out. This line $rv .= '/> &nbsp;'; needed to be changed to $rv .= ' /><br />';