Category Text Aligning When Expand/Collapse?

Started by archvillainxx, April 05, 2012, 04:43:11 PM

Previous topic - Next topic

archvillainxx

Just wondering when this was going to be fixed, I made a post about it a year back or so and was told it was going to be fixed on the next update. So I was just wondering if there was a manual fix for it, I couldn't find any post  for it.

Antechinus

Which browser? Which version of SMF? IIRC it should have been fixed in 2.0 Final.

archvillainxx

I'm using Google Chrome with the latest version of SMF, 2.0.2. I see it happening on SMF's forums as well. The expand/collapse toggle doesn't even show in IE.

Antechinus

Hmm. Yup, does it here. Doesn't do it in my 2.1 Alpha though, which is a bonus.

Does reloading the page sort it out? IIRC that used to put the text back where it was, so it was only a problem when you first collapsed a category.

archvillainxx

Yeah clicking a link would fix it, however, refreshing the page itself won't. Ill try out the 2.1 as you mentioned. I'm not exactly sure what IIRC is though.

Antechinus

No don't try 2.1 yet. That's an early development build. You do not want that on a live site. :D

However, if you like you can try the code change for the category headers. That's quite simple and shouldn't break anything else. What we decided to do was change the functionality a bit, so that the category name links to unread posts in that category, with the collapse/expand function being handled by the usual icon. This seemed to make more sense than having two collapse links, plus another link for unread posts.

Do note that this is a little bit hacky at the moment, but it seems to work just fine so I wouldn't worry too much unless you're a clean code freak.

BoardIndex.template.php

Find:
<h3 class="catbg">';

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<a class="collapse" href="', $category['collapse_href'], '">', $category['collapse_image'], '</a>';

if (!$context['user']['is_guest'] && !empty($category['show_unread']))
echo '
<a class="unreadlink" href="', $scripturl, '?action=unread;c=', $category['id'], '">', $txt['view_unread_category'], '</a>';

echo '
', $category['link'], '
</h3>


Replace:
<h3 class="catbg">';

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<a class="collapse" href="', $category['collapse_href'], '" title="' ,$category['is_collapsed'] ? 'Show' : 'Hide' ,'">', $category['collapse_image'], '</a>';

if (!$context['user']['is_guest'] && !empty($category['show_unread']))
echo '
<a href="', $scripturl, '?action=unread;c=', $category['id'], '" title="', $txt['view_unread_category'], '">', $category['name'], '</a>';
else
echo '
', $category['name'];
echo '
<span style="margin-left: -999em;">', $category['link'], '</span>
</h3>


Try that and see if it's better for you.

archvillainxx

Hey, thanks a lot for the replies so far. I tried replacing the code but it still does the same bug except it expands the category upwards.  :laugh:

Antechinus

Eh wot? How the hell do you get that? :D Ok, I'll play around with a vanilla 2.0.2 and Chrome later and see what I can come up with.

zeroality

Posting to say that I have this same issue. New user to SMF, just installed 2.0.2 and this occurred on Google Chrome (v19).

Refreshing did not fix the alignment. I had 2 categories. Collapsed the top one, text got misaligned. Did the bottom, which restored the top back to normal but misaligned the text on bottom.

Googled "smf collapse forum category" to see if there was anything on this and here I am. Hope you have luck tracking down the problem!

Storman™


MundoX

Hi all, i have set up SMF 202 and have the same problem. This community have the same problem too :(.

Attached you can find a printscreen.
Description : Chrome browser (17.0), click on collapse (+ or -) right to "Unread Posts", then the page is reloaded with anchor "#c2", then the last clicked collapsed category is misaligned.

Tips for devs :
1. remove the anchor from the url and all is ok
2. go to "Inspect element" and tick or untick the <h3> height marked on image and all is ok

Donno if it's a browser thing but it's annoying. and it's on the main page.



Antechinus

Forgot about this one. Still does it on Chrome 27.

QuoteTips for devs :
1. remove the anchor from the url and all is ok
2. go to "Inspect element" and tick or untick the <h3> height marked on image and all is ok

Cool. That's a handy tip. The anchor should stay, but can do something with the height. IIRC that was originally included for old versions of IE (like a lot of cruddy stuff in 2.0.x). I'll take a look at it. Doesn't happen in FF, so is defo a browser glitch.

Biology Forums

Quote from: Antechinus on June 07, 2013, 07:38:19 PM
Forgot about this one. Still does it on Chrome 27.

QuoteTips for devs :
1. remove the anchor from the url and all is ok
2. go to "Inspect element" and tick or untick the <h3> height marked on image and all is ok

Cool. That's a handy tip. The anchor should stay, but can do something with the height. IIRC that was originally included for old versions of IE (like a lot of cruddy stuff in 2.0.x). I'll take a look at it. Doesn't happen in FF, so is defo a browser glitch.

Thanks for looking into it.

Antechinus

Ok, solution. In index.css find:

/* Styles for rounded headers.
------------------------------------------------------- */
h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbg
{
overflow: hidden;
height: 31px;
line-height: 31px;
font-size: 1.2em;
font-weight: bold;
}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
}


Add after:
h3.catbg a:link, h3.catbg a:visited
{
display: inline-block;
}


Tested in latest FF, Chrome, Opera, IE9 and IE8 emulation and IE7 emulation. Works in all of those. Should be fine in Safari too.

Haven't checked everywhere else in the theme, so if it breaks somewhere else with the added css it will be easy to alter the code to only target the board index. :)

ETA: This should also work in any custom themes that have the same buglet.


Advertisement: