News: Welcome to the TinyPortal Support site.

Login  |  Register
HTML5 Icon HTML5 Icon
TP on Social Media
Welcome, Guest. Please login or register.
Did you miss your activation email?

June 16, 2019, 07:53:33 AM

Login with username, password and session length

Recent

Members
Stats
  • Total Posts: 188435
  • Total Topics: 20727
  • Online Today: 38
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 0
Guests: 26
Total: 26

Author Topic: Blocks Aren't Lining Up  (Read 2474 times)

0 Members and 1 Guest are viewing this topic.

Offline MisterVertigo

  • Newbie
  • *
  • Posts: 4
Blocks Aren't Lining Up
« on: August 30, 2018, 03:27:42 PM »
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!
« Last Edit: August 31, 2018, 12:30:08 PM by @rjen »

Offline lurkalot

  • Administrator
  • *
  • Posts: 6042
    • Camera Craniums
Re: Blocks Aren't Lining Up
« Reply #1 on: August 30, 2018, 04:21:54 PM »
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.

Offline MisterVertigo

  • Newbie
  • *
  • Posts: 4
Re: Blocks Aren't Lining Up
« Reply #2 on: August 30, 2018, 05:39:27 PM »
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!

Offline illori

  • Administrator
  • *
  • Posts: 2050
Re: Blocks Aren't Lining Up
« Reply #3 on: August 30, 2018, 05:43:19 PM »
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.

Offline MisterVertigo

  • Newbie
  • *
  • Posts: 4
Re: Blocks Aren't Lining Up
« Reply #4 on: August 30, 2018, 05:49:18 PM »
That is slightly better, yes. It's still there but not nearly as noticeable.

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Blocks Aren't Lining Up
« Reply #5 on: August 31, 2018, 02:23:21 AM »
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]
/* the small stats */
#index_common_stats
{
   display: block;
   margin: 0 0 0.5em 0;

Replace by

Code: [Select]
/* the small stats */
#index_common_stats
{
/*   display: block; */
   display: none;
   margin: 0 0 0.5em 0;
« Last Edit: August 31, 2018, 04:44:37 AM by @rjen »
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Blocks Aren't Lining Up
« Reply #6 on: August 31, 2018, 02:58:36 AM »
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...
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline tino

  • Developer
  • *
  • Posts: 1567
Re: Blocks Aren't Lining Up
« Reply #7 on: August 31, 2018, 05:01:53 AM »
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.

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Blocks Aren't Lining Up
« Reply #8 on: August 31, 2018, 05:03:56 AM »
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?
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline tino

  • Developer
  • *
  • Posts: 1567
Re: Blocks Aren't Lining Up
« Reply #9 on: August 31, 2018, 05:32:36 AM »
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

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Blocks Aren't Lining Up
« Reply #10 on: August 31, 2018, 05:57:19 AM »
It is simpler to Fix with this addition to the css...

add this to the curve index.css and you are done...

Code: [Select]
div #boardindex_table
{
   position: relative;
   top: -2px;
}

It could be added to the TPstyle.css, but as I stated: it is only needed for Curve (or curve-based) theme(s)...
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline tino

  • Developer
  • *
  • Posts: 1567
Re: Blocks Aren't Lining Up
« Reply #11 on: August 31, 2018, 11:35:02 AM »
It is simpler to Fix with this addition to the css...

add this to the curve index.css and you are done...

Code: [Select]
div #boardindex_table
{
   position: relative;
   top: -2px;
}

It could be added to the TPstyle.css, but as I stated: it is only needed for Curve (or curve-based) theme(s)...

We shouldn’t be modifiying the curve css files. We either add it inline or have it in the tp css. I’m for the in-line option based on the theme. Or allow it to be a configurable option in settings.

Final option is we just accept it as is.

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Blocks Aren't Lining Up
« Reply #12 on: August 31, 2018, 11:40:54 AM »
OP was asking of he could fix the CSS. This is the fix.

I feel this is not something we should try to fix in TP. I for one use a Curve variation that you can’t fix inline and there will be many more like it. Actually Alpha Centauri has the exact same issue....

If OP is happy making this change I vote for leaving it as is.
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline lurkalot

  • Administrator
  • *
  • Posts: 6042
    • Camera Craniums
Re: Blocks Aren't Lining Up
« Reply #13 on: August 31, 2018, 12:04:40 PM »
@rjen, I was just trying out that css adjustment in curve you posted above.  While it did seem to cure the alignment issue in that particular scenario, Side panel to forum index.

I you instead just have promoted posts etc on the front page then the alignment issue is there as well.  Based on that, the suggestion tino made regarding a config option might be an idea worth considering. 

Funny how I haven't noticed these strange issues until they're pointed out, now they stick out like a sore thumb. lol..

Offline MisterVertigo

  • Newbie
  • *
  • Posts: 4
Re: Blocks Aren't Lining Up
« Reply #14 on: August 31, 2018, 12:13:16 PM »
To be honest, I didn't expect much of an answer on this thread as the issue was so minor. You guys have blown me away! This is hands-down the best support I've ever gotten for any project like this. Not all of the issue was even with your code and you still helped me work out a solution. Thank you!

With that being said I was able to make the code changes you guys posted and it looks much better now. My OCD is content! As far as I'm concerned this issue is resolved. Thank you again!

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Blocks Aren't Lining Up
« Reply #15 on: August 31, 2018, 12:24:42 PM »

I you instead just have promoted posts etc on the front page then the alignment issue is there as well.  Based on that, the suggestion tino made regarding a config option might be an idea worth considering. 

pretty sure that is another issue. Do you have a testbed setup that I can check?
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Blocks Aren't Lining Up
« Reply #16 on: August 31, 2018, 12:29:46 PM »
To be honest, I didn't expect much of an answer on this thread as the issue was so minor. You guys have blown me away! This is hands-down the best support I've ever gotten for any project like this. Not all of the issue was even with your code and you still helped me work out a solution. Thank you!

With that being said I was able to make the code changes you guys posted and it looks much better now. My OCD is content! As far as I'm concerned this issue is resolved. Thank you again!

You're welcome. Marking this solved...
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline lurkalot

  • Administrator
  • *
  • Posts: 6042
    • Camera Craniums
Re: Blocks Aren't Lining Up
« Reply #17 on: August 31, 2018, 12:45:47 PM »

I you instead just have promoted posts etc on the front page then the alignment issue is there as well.  Based on that, the suggestion tino made regarding a config option might be an idea worth considering. 

pretty sure that is another issue. Do you have a testbed setup that I can check?

I do as it happens, I just switched it over from the other layout.

http://cctestsite.info/forums/index.php

The attached screenshot is the forum + side panel layout we were discussing with your fix added to curve.  As you can see that sorted that one.  If you visit now I have set it to "Forum-posts and articles - sorted on date".  You can see the slight misalignment.

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Blocks Aren't Lining Up
« Reply #18 on: August 31, 2018, 12:51:18 PM »
That's what I thought: you are not using the frontpanel, but you left the setting to "Frontpanel added before the content"
Result is that the div is placed before the content even if it is empty, it still has a 4px padding..

In this case change the Frontapge setting to  Hide frontpanel, unless otherwise selected OR  Frontpanel will be added after content

That will fix it...
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline lurkalot

  • Administrator
  • *
  • Posts: 6042
    • Camera Craniums
Re: Blocks Aren't Lining Up
« Reply #19 on: August 31, 2018, 12:58:48 PM »
That's what I thought: you are not using the frontpanel, but you left the setting to "Frontpanel added before the content"
Result is that the div is placed before the content even if it is empty, it still has a 4px padding..

In this case change the Frontapge setting to  Hide frontpanel, unless otherwise selected OR  Frontpanel will be added after content

That will fix it...

Thanks, that's correct, and a mistake anyone could make.  To me that's a bug, or at least needs documenting if it isn't already. 

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Blocks Aren't Lining Up
« Reply #20 on: August 31, 2018, 01:05:24 PM »
True,

it's annoying. I noticed something similar on this site: if a top block is not shown to a user group, the empty block with padding is still taking some space...
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline lurkalot

  • Administrator
  • *
  • Posts: 6042
    • Camera Craniums
Re: Blocks Aren't Lining Up
« Reply #21 on: August 31, 2018, 01:20:41 PM »
My biggest problem is I've used TP for so long now I get so used to its little flaws, I just don't see them until pointed out.  Little things like this can cause much head scratching.