MyBB Community Forums

Hello.
Mybb 1.8 have bug with collapse item.
Why  ?
Because template like a forumbit for make forums are buged on IE11, but work better from Chrome.

 expandedItem.toggle("fast");

Hmmm.... this section collapse in general.js put height: into <tbody> lol
See at reference http://api.jquery.com/toggle/
On chrome i have only fade effect, but where is animation on fade this item ?
Normally I cannot change jquery effect like .slideToggle because construction of table don't accept it on Chrome, but accept on IE11.
Here is example template for forumbit to better work this effect, or any other jQuery effect like slideToggle, or fade
Sorry for lame code, but it was maked fast.

<table border="0" cellspacing="0" cellpadding="0" class="tborder">

<thead>
<tr>
<td class="thead" colspan="5">
<div class="forum-icon float-left"><img src="{$theme['imgdir']}/forum-icons/forum-icon-{$forum['fid']}.png" /></div>
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><a href="{$forum_url}" class="cat-link">{$forum['name']}</a><div class="smalltext cat-description">{$forum['description']}</div></div>
</td>
</tr>
</thead>
</table>

<div style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<table border="0" cellspacing="0" cellpadding="0" class="tborder">
<tbody >
<tr>
<td class="tcat" colspan="2"><span class="smalltext">{$lang->forumbit_forum}</span></td>
<td class="tcat forumnum-post-tcat" width="170" align="center" style="white-space: nowrap;"><span class="smalltext" style=" margin-right: 25px; ">{$lang->forumbit_threads} & {$lang->forumbit_posts}</strong></span></td>
<td class="tcat last-post-tcat" width="220" align="center"><span class="smalltext">{$lang->forumbit_lastpost}</span></td>
</tr>
{$sub_forums}
</tbody>
</table>
</div>
<br />

Lol, no one has been interested that is bug with correctly collapsing forums tables...

So if all want to have a correctly working Collapse with any effect defined in general.js put this CSS style in your Style

tbody {
display: block;
height: auto;
overflow-y: hidden;
}

Now your browser will accept tag height and correct collapse effect.
And now we can change any jQuery collapse effect in javascript code

But not work still perfect..

I can confirm it in IE11. Please be patient next time.

Hi,

Thank you for your report. We have pushed this issue to our Github repository for further analysis where you can track our commits and progress with fixing this bug. Discussions regarding this bug may also take place there too.

Follow this link to visit the issue on Github: https://github.com/mybb/mybb/issues/1366

Thanks for contributing to MyBB!

Regards,
The MyBB Group

Here is a simple example with video how to reapair.



this is correct effect jQuery.toggle(); defined in http://community.mybb.com/jscripts/general.js

 if(expandedItem.is(":hidden"))

 {
expandedItem.toggle("fast");
element.attr("src", element.attr("src").replace("collapse_collapsed.png", "collapse.png"))
.attr("alt", "[-]")
.attr("title", "[-]");
element.parent().parent('td').removeClass('tcat_collapse_collapsed');
element.parent().parent('.thead').removeClass('thead_collapsed');
this.saveCollapsed(controls);
}
// Collapsing
else
{
expandedItem.toggle("fast");
element.attr("src", element.attr("src").replace("collapse.png", "collapse_collapsed.png"))
.attr("alt", "[+]")
.attr("title", "[+]");
element.parent().parent('td').addClass('tcat_collapse_collapsed');
element.parent().parent('.thead').addClass('thead_collapsed');
this.saveCollapsed(controls, 1);
}

@glover, feel free to submit a PR with your fix on github.