I'm running SMF 2.0.17 and TP 2.0.0.
I've set the Top Panel to display blocks in the second grid option:
1 2 3
4 5
The blocks appeared correctly before I deleted a block and replaced it. Now the blocks display as:
1 2 3
4
5
If I delete all the blocks and start again, the same display pattern. It's as if TP remembers there was once a block in the old position 4 and I can't get another block to appear there. And the new block 4 is slightly narrower than the one above, see attached.
Any suggestions please?
Hi Anmer. What code do you have in the block? Have you tried turning that one off and creating another one to see how that positions itself, I mean just a simple bbc type block with a bit of text it it for testing purposes only.
Ok, confirmed, looks like you found a bug. This is also present in TP2.0.1
Just wondering and as a workaround, would you be able to get away with using the setting "Display the blocks in 3 columns" instead? Depends what you need to put in block one I suppose.
Thanks for getting back to me.
The blocks are HTML/Javascript but the same thing happens if I change to BB Code.
For my purpose, I really wanted to use the grid option. The other options don't really work for me in this instance.
If it's a bug, so be it. I'll have to think of a different solution.
Thanks again for your help. Much appreciated.
I am pretty sure this is not working quite right for many versions before... I think this grid function may need to be rewritten to use proper flex grid...
Quote from: @rjen on April 02, 2021, 08:58:06 PM
I am pretty sure this is not working quite right for many versions before... I think this grid function may need to be rewritten to use proper flex grid...
I think you're right @rjen, haven't used this feature for some time, in fact can't remember the last time I did. I obviously didn't test it recently either.
I tried the first grid setting too and this seems to work, though it repeats the layout after 4 blocks and not sure if it's supposed to.
The 'problem' is a limitation of this pretty old solution for the grid...
If block 2 has a height larger then block 3, block 4 is effectively positioned under block 3 instead of under block 2. Block 5 then moves to the next line...
How to 'fix' the grid with this: make sure the content of block 3 is 'longer' then block 2. It does not make sense, I know, but that fixes the layout...
I'll see if I can change that to flex grid someday, that will make it work a lot better..
Quote from: @rjen on April 02, 2021, 09:42:34 PM
The 'problem' is a limitation of this pretty old solution for the grid...
If block 2 has a height larger then block 3, block 4 is effectively positioned under block 3 instead of under block 2. Block 5 then moves to the next line...
Yes, it's kind of confusing for me to get my head around, only because in my screenshot above all the blocks were identical size and type, but this still happened. Flex grid sounds good though. O0
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.
Quote from: @rjen on April 02, 2021, 09:42:34 PM
How to 'fix' the grid with this: make sure the content of block 3 is 'longer' then block 2. It does not make sense, I know, but that fixes the layout...
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.
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
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?
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>');
I updated the grids for the next TP versions (2.1.0) to use CSS grid.
That fixes this undesired behaviour...
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.
I just posted the latest version in the beta testing board
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. ;)
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.
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...
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.
That's the issue iI mentioned before: as soon as the heigth of block 2 is more than that of block 3 this will happen: block 4 is then positioned 'to the right' of block 2 instead of below it...
The longer text in block 2 (1) wraps earlier than that in block 3.
As a result block 2 is 'higher' (2) and pushes block 4 to the right (3).
Solution: make sure that the text in block 3 is the same of more than in block 2...
No other way to fix it now: The css grid I made for TP 2.1.0 will deal with this...
Thank you, that fixed it (again).