Advertisement:

Author Topic: Category Text Aligning When Expand/Collapse?  (Read 10935 times)

Offline archvillainxx

  • Semi-Newbie
  • *
  • Posts: 19
Category Text Aligning When Expand/Collapse?
« on: April 05, 2012, 04:43:11 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,246
  • Master of BBC Abuse
Re: Category Text Aligning When Expand/Collapse?
« Reply #1 on: April 05, 2012, 05:44:49 PM »
Which browser? Which version of SMF? IIRC it should have been fixed in 2.0 Final.

Offline archvillainxx

  • Semi-Newbie
  • *
  • Posts: 19
Re: Category Text Aligning When Expand/Collapse?
« Reply #2 on: April 05, 2012, 06:03:07 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,246
  • Master of BBC Abuse
Re: Category Text Aligning When Expand/Collapse?
« Reply #3 on: April 05, 2012, 06:13:45 PM »
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.

Offline archvillainxx

  • Semi-Newbie
  • *
  • Posts: 19
Re: Category Text Aligning When Expand/Collapse?
« Reply #4 on: April 05, 2012, 06:42:19 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,246
  • Master of BBC Abuse
Re: Category Text Aligning When Expand/Collapse?
« Reply #5 on: April 05, 2012, 07:03:46 PM »
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:
Code: [Select]
<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:
Code: [Select]
<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.

Offline archvillainxx

  • Semi-Newbie
  • *
  • Posts: 19
Re: Category Text Aligning When Expand/Collapse?
« Reply #6 on: April 06, 2012, 06:18:35 PM »
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:

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,246
  • Master of BBC Abuse
Re: Category Text Aligning When Expand/Collapse?
« Reply #7 on: April 06, 2012, 06:26:52 PM »
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.

Offline zeroality

  • Newbie
  • *
  • Posts: 1
Re: Category Text Aligning When Expand/Collapse?
« Reply #8 on: May 28, 2012, 08:47:14 AM »
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!

Offline Storman™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 2,027
Re: Category Text Aligning When Expand/Collapse?
« Reply #9 on: May 28, 2012, 08:55:10 AM »
A screen shot or link would be good  :D
Any Backup method is bettter than no Backup method....

Offline MundoX

  • Newbie
  • *
  • Posts: 2
Re: Category Text Aligning When Expand/Collapse?
« Reply #10 on: August 09, 2012, 11:00:09 AM »
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.

Offline MundoX

  • Newbie
  • *
  • Posts: 2
Re: Category Text Aligning When Expand/Collapse?
« Reply #11 on: August 14, 2012, 07:05:37 AM »
help ...

Offline Study Force

  • SMF Hero
  • ******
  • Posts: 3,599
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
Re: Category Text Aligning When Expand/Collapse?
« Reply #12 on: June 07, 2013, 04:17:55 PM »
Has this been updated? Any insight...

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,246
  • Master of BBC Abuse
Re: Category Text Aligning When Expand/Collapse?
« Reply #13 on: June 07, 2013, 07:38:19 PM »
Forgot about this one. Still does it on Chrome 27.

Quote
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

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.

Offline Study Force

  • SMF Hero
  • ******
  • Posts: 3,599
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
Re: Category Text Aligning When Expand/Collapse?
« Reply #14 on: June 07, 2013, 07:50:33 PM »
Forgot about this one. Still does it on Chrome 27.

Quote
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

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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,246
  • Master of BBC Abuse
Re: Category Text Aligning When Expand/Collapse?
« Reply #15 on: June 07, 2013, 08:27:05 PM »
Ok, solution. In index.css find:

Code: [Select]
/* 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:
Code: [Select]
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.

Offline Study Force

  • SMF Hero
  • ******
  • Posts: 3,599
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
Re: Category Text Aligning When Expand/Collapse?
« Reply #16 on: June 07, 2013, 10:04:20 PM »
Beauty, it worked.

Thank you.