TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 28, 2024, 08:05:38 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,104
  • Total Topics: 21,212
  • Online today: 143
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 101
  • Total: 101

"Missing" Block in Panel

Started by Anmer, April 02, 2021, 04:06:16 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

@rjen

Quote from: tino on April 02, 2021, 10:04:10 PM
Quote from: lurkalot on April 02, 2021, 09:55:24 PM
Flex grid sounds good though.  O0

Flexbox and Grid are two different ways of doing largely the same thing btw. I don't think 'flex grid' is actually a thing. Although I am happy to be proved wrong.

Flex is a one dimensional pattern whereas grid is more two dimensional.

You are right: flex is one dimensional and may have the same limitation. It's been a while since I played with flex box. CSS grid may be better
Running Latest TP on SMF2.1 at: www.fjr-club.nl

Anmer

Quote from: tino on April 02, 2021, 10:07:05 PM
You can probably get around it by setting the display to be a max-height and overflow hidden for the box.

Or just ensure the height of the div's are all the same.

I assume this refers to a potential, new implementation of the Grid option, not something I can do as a current version TP user?

@rjen

#12
As a user you can make sure that the content of block 2 is less tall than the content of block 3.

For your specific situation there is a stray 5px padding that causes this in your site..

If you go to the file Sources\TPortal.php

find this line:
$context['TPortal']['grid']['rowspan1'][1] = array('before' => '<div class="gridC" style="width:67%;float:left;"><div class="gridColumns" style="width:49%;padding-right: 1%;padding-bottom: 5px;float:left;">', 'after' => '</div>');

and replace this with
$context['TPortal']['grid']['rowspan1'][1] = array('before' => '<div class="gridC" style="width:67%;float:left;"><div class="gridColumns" style="width:49%;padding-right: 1%;float:left;">', 'after' => '</div>');
Running Latest TP on SMF2.1 at: www.fjr-club.nl

@rjen

I updated the grids for the next TP versions (2.1.0) to use CSS grid.
That fixes this undesired behaviour...



Running Latest TP on SMF2.1 at: www.fjr-club.nl

lurkalot

Quote from: @rjen on April 03, 2021, 05:25:44 PM
I updated the grids for the next TP versions (2.1.0) to use CSS grid.
That fixes this undesired behaviour...

Nice job @rjen.  O0  I need to get testing. 

@rjen

I just posted the latest version in the beta testing board
Running Latest TP on SMF2.1 at: www.fjr-club.nl

lurkalot

Quote from: @rjen on April 03, 2021, 05:44:51 PM
I just posted the latest version in the beta testing board

I've just seen it, thank you. Will grab it now and give it a spin.  ;)

Anmer

Quote from: @rjen on April 03, 2021, 10:58:00 AM
If you go to the file Sources\TPortal.php

Thank you, that fixed the issue.  I do appreciate all your help with this and look forward to the next release.

@rjen

No probs, these are the kind of reports that help improve TinyPortal: we personally all have our preferences and Therefor sometimes these bugs can remain in there for a long time.

Feel free to report here...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

Anmer

Sorry to come back on this but having implemented the interim fix, I just noticed the grid doesn't display correctly on a smaller screen, see attached.

It demonstrates the same characteristics as before.