imno007
Well-known member
Anyone else here using UI.X who has created a homepage with a tabbed widget? If so, have you got the tabbed widget to display correctly? Just wondering because every single Themehouse style I've tried recently is stretched out to three times the width it should be when displaying the tabbed widget, with some side widgets on the right (where they should be) and some on the bottom left. Just a complete mess. Works fine on every single other style I have and used to work fine with TH styles.
Here's what the tabbed widget should look like:
Here's what happens with a TH style:
The tabbed widget code is:
How to fix this?
Here's what the tabbed widget should look like:
Here's what happens with a TH style:
The tabbed widget code is:
<div class="block">
<div class="block-container">
<h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
<span class="hScroller-scroll">
<a href="{{ link('whats-new') }}?skip=1"
class="tabs-tab is-active"
id="all_threads"
role="tab"
aria-controls="new_threads_homepage">Latest threads</a>
<a href="{{ link('whats-new/posts') }}?skip=1"
class="tabs-tab"
id="forum_overview_new_posts"
role="tab">Latest posts</a>
<a href="{{ link('whats-new/profile-posts') }}?skip=1"
class="tabs-tab"
id="whats_new_new_profile_posts"
role="tab">Latest profile posts</a>
</span>
</h2>
<ul class="tabPanes widget--tab">
<li class="is-active" role="tabpanel" id="tab_latest_threads">
<xf:widget key="new_threads_homepage" />
</li>
<li role="tabpanel" aria-labelledby="tab_latest_post">
<xf:widget key="forum_overview_new_posts" />
</li>
<li role="tabpanel" aria-labelledby="tab_latest_profile_post">
<xf:widget key="whats_new_new_profile_posts" />
</li>
</ul>
</div>
</div>
<xf:css>
.widget-tabs {
overflow: hidden;
.tabs-tab {font-size: 13px;}
}
.widget--tab .block[data-widget-id] .block-minorHeader {display: none;}
.widget--tab .block[data-widget-id] .block-header {display: none;}
</xf:css>
How to fix this?