Blocks Aren't Lining Up

[MisterVertigo]

Hello! I have a fresh new install of SMF 2.0.15 and the latest version of TinyPortal (1.5.1) and I'm having a frustrating issue. All I'm wanting to do is use the far right panel with about 4 blocks in it, including the User, Search, Stats, and Shoutbox. I have TinyPortal configured to only use the Forum Index, and these blocks should appear on every page.

Everything appears to be working OK, but when looking at the Forum Indec the top-most Category bar does not line up with the top of the Right TinyPortal blcok. It's about 8 pixels below the top of the Right Panel. In my SMF settings I have turned off "Show statistics on board index" and "Show latest member on board index" for the current theme since they will be displayed in the Block in the right panel. If I turn them back on the problem is a bit better, but it still doesn't quite line up.

I'm using the SMF Default Theme - Curve. It does the same thing if I use any other theme. The strangest part is when I go to look at a forum everything lines up perfectly. It's only when I'm on the forum index, and it's worse when the Show Statistics option is on in theme settings. Attached is a screen shot so you can see what I'm talking about.

Any suggestions on what I'm doing wrong, or a .CSS file I can modify to make it line up properly? Thank you!

[lurkalot]

Hi MisterVertigo, and welcome to Tinyportal support.

I hadn't seen that alignment issue until I tried the settings you just mentioned.  I can confirm there's a bug.  For me it seems the "Show statistics on board index" is causing quite a big shift in the alignment.

Please bare with us while we try a find a workaround for you, at least until a permanent fix can be put in place.

Thanks, and sorry for any inconvenience.

[MisterVertigo]

Oh wow, thank you very much for the quick response! I'm just glad that someone else can replicate the issue and it's not just me. If you can come up with a workaround I would appreciate it very much!

[illori]

in the TP admin panel -> settings "yes" Use the roundframe style for left/right panels? and save the page then you will find it will line up better.

[MisterVertigo]

That is slightly better, yes. It's still there but not nearly as noticeable.

[@rjen]

It seems that SMF Curve injects an element on top when you deactivate the STATS on the board index in SMF:  called index_common_stats
Even though it is not actually displaying, it is pushing the category down...

TBH it does not look like something TP can really fix, since it is in the SMF theme itself...

You can fix it by disabling this element in the index.css file.
It does not seem to do very much anyway...

Find

Code Select Expand

/* the small stats */
#index_common_stats
{
   display: block;
   margin: 0 0 0.5em 0;


Replace by

Code Select Expand

/* the small stats */
#index_common_stats
{
/*   display: block; */
   display: none;
   margin: 0 0 0.5em 0;


[@rjen]

This will leave you with a 2px 'alignment difference' due to the fact that the Board index page is using a table that has a default border spacing of 2px. TP does not use tables. Not sure if that is easily fixable...

[tino]

We can stick a -ve margin-top (or padding-top) in TinyPortal to bring the block up. I can't test or work out what that should be but that's probably the easiest.

[@rjen]

We can stick a -ve margin-top (or padding-top) in TinyPortal to bring the block up. I can't test or work out what that should be but that's probably the easiest.

Possibly, but this would only apply in the Boardindex page: in all other locations the Panels are correctly lined up...
So not sure how you would make that only apply on the boardindex, and only for curve ??

TBH it is really the way curve is coded that is causing the boardindex to 'appear' te be misaligned.... I am not in favor of misaligning the right (and left) panel on all other theme's and locations, just because Curve has a table-based boardindex with border spacing?

[tino]

Add it in the buffer logic if theme id is curve and action is BoardIndex then add that to the top in context[html_before'] it's called something like that. So inline style