Tables are not centered in 2.1.4

[HelAu007]

Hello
We just upgraded from 2.0.x to 2.1.4.
Overall its a great improvement, thanks !!!
In the old version, tables could be centered, now these are all shown at the left
Regards
Helmut

[Sir Osis of Liver]

Screenshot?

[Aleksi "Lex" Kilpinen]

Default:

This is a table.

R1C1000	R1C2000	R1C3000
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

Here ends said table.

Centered:

This is a table.

R1C1000	R1C2000	R1C3000
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

Here ends said table.

I assume you were able to actually center the table, as now it seems to only center the contents within the table?
I'm not sure what has changed, but it would make sense to center the whole table if you wrap it in center tags.

Calling this a possible bug, moved to bug reports.

[HelAu007]

Exactly, and the funny thing, on a mobile its right aligned, on a PC left aligned.

Code Select Expand

[center]This is a centered text above a table
[table][tr][td]A1[/td]
[td]B1[/td]
[/tr]
[tr][td]A2[/td]
[td]B2[/td]
[/tr]
[/table]
[/center]And I have attached screenshots from the preview on 2.1.4 and an older one

[Sir Osis of Liver]

Table is centered in 2.0, not in 2.1.  It's a bug.

[Diego Andrés]

Is it supposed to look like this?
You cannot view this attachment.

Should be easy to fix.

Code Select Expand

.centertext table {
  margin-inline: auto;
}

[Aleksi "Lex" Kilpinen]

I think I would actually need to test and see how the table, versus the table contents, acted in different situations on 2.0, but before that at least that seems better than it is now.

[HelAu007]

Is it supposed to look like this?
You cannot view this attachment.

Should be easy to fix.

Code Select Expand

.centertext table {
  margin-inline: auto;
}

Yes its supposed to look like this.
What exactly can I do to check this ?

[Kindred]

modify your index.css

[Sir Osis of Liver]

You can't center a table in 2.1 with bbc tags.  This doesn't work either -

Code Select Expand


[center][table][tr][td]A1[/td]
[td]B1[/td]
[/tr]
[tr][td]A2[/td]
[td]B2[/td]
[/tr]
[/table][/center]



A1	B1
A2	B2

[Antechinus]

No, it wouldn't. Tables are a block level element, and text-align only works on inline elements. Use margin: 0 auto; instead. If that does not exist, make a BBC tag for it (should be a no brainer).

[Sir Osis of Liver]

Well, that's really the point.  It should work with default tags in reply editor, but it doesn't.  You can work around it, so can I, but shouldn't be necessary for members to mess with it.

[Antechinus]

Yes, but I'm thinking of the easiest fix for it.

In practice you need to do two things: centering inline elements (text-align: center;) because inline elements cannot have a margin set, and centering block level elements (margin : 0 auto;) because text-align doesn't work on them.

The easiest way to do it all with one tag is probably to make the centertext tag create the usual div (with text-align: center;) with another div inside it (set to display: inline-block;) and the content of the tag goes inside the second div. That way it doesn't matter if the content is an inline element or a block level element. A div is a valid wrapper for both, and if set to inline-block it will shrink to the width of the content, and it will accept text-align: center; and behave itself.

[Chen Zhen]

I never looked at BBC tables in 2.1 until this thread but shouldn't it be updated to use div tables?
Also if the tables are given 100% width then it centers.

[Kindred]

No tables are actually tables,  not divs

[live627]

why does it not use the center tag? and why delve deeper into divitus?

[Antechinus]

why does it not use the center tag?

I explained that already. The text-align: center; doesn't work on block level elements, and a table is a block level element. However, the fix I suggested will work for tables too. I tested it live. It works. It works if you put a table in the inner (second) div, and it works if you put a third div (ie: display: block;) inside the second div.

In both cases the inner div shrinks to the width of the target element's content, and the whole kaboodle then behaves when it is told to use text-align: center;

Which is the result you want, yes?

In practice you need to do two things: centering inline elements (text-align: center;) because inline elements cannot have a margin set, and centering block level elements (margin : 0 auto;) because text-align doesn't work on them.

The easiest way to do it all with one tag is probably to make the centertext tag create the usual div (with text-align: center;) with another div inside it (set to display: inline-block;) and the content of the tag goes inside the second div. That way it doesn't matter if the content is an inline element or a block level element. A div is a valid wrapper for both, and if set to inline-block it will shrink to the width of the content, and it will accept text-align: center; and behave itself.

[Sir Osis of Liver]

It works in 2.0, why not in 2.1?

[Antechinus]

Probably because 2.0 used the old (now-deprecated) HTML center tag. It's not a problem though. Just change the tag markup to add the extra div. It takes longer to talk about it than it would take to do it.

[live627]

C'mon, man!  This is Simple Machines, where we argue all day and get nothing done !


Shame that it's deprecated. I really like expressive markup.

[Antechinus]

Eh, bollocks.

Code (Sauces/Subs.php - Find this stuff) Select Expand

array(
'tag' => 'center',
'before' => '<div class="centertext">',
'after' => '</div>',
'block_level' => true,
),


Code (Sauces/Subs.php - Replace that stuff with this stuff (you know you want to)) Select Expand

array(
'tag' => 'center',
'before' => '<div class="centertext"><div>',
'after' => '</div></div>',
'block_level' => true,
),


Code (Thames/default/css/index.css - Now find this stuff) Select Expand

.centertext, .centercol {
margin: 0 auto;
text-align: center;
}


Code (Thames/default/css/index.css - Bet you can't guess what to do with this stuff) Select Expand

.centertext, .centercol {
margin: 0 auto;
text-align: center;
}
.centertext > div {
display: inline-block;
}

Iz all fixed now. Go have beer.

[live627]

Beer? Losers. Have tea like a Real Man! lmao

[live627]

Bet you can't guess what to do with this stuff

Instructions unclear: Put Sauses into the River Thames but tables keep getting misaligned by cats.

[live627]

It works on my end by just adding a margin to the table

https://github.com/SimpleMachines/SMF/pull/7797

(I'm annoying the powers that be who loath serial posting muhahaha)

[Antechinus]

Yes, if you put an auto left and right margin on a block level element it will centre itself. However, you are still left with a "center" tag that will only centre inline elements, and still won't centre block level elements. I gave you code for a "center" tag that would centre everything. It's more versatile, and it's bulletproof, and the code changes are really simple, and it will stop people asking why your "center" tag doesn't centre whatever they feel like centering that day.

But hey, do wotcha like. No skin off my nose, sunshine.

[Sir Osis of Liver]

If it wasn't broke in 2.0, why was it fixed in 2.1?

[live627]

coz it brokeded

[Antechinus]

If it wasn't broke in 2.0, why was it fixed in 2.1?

I do believe I already explained that, but feel free to not bother reading. It makes the effort of explaining feel so worthwhile.

[Sir Osis of Liver]

You're beginning to sound like Arantor.   My attention span is rather brief, and memory is even worse, but I probably did read your explanation.  Water off a duck.

[live627]

@Antechinus I'm sorry for annoying you.

[Aleksi "Lex" Kilpinen]

You're beginning to sound like Arantor.   My attention span is rather brief, and memory is even worse, but I probably did read your explanation.  Water off a duck.

The explanation I believe is basically the eternal curse of HTML, it evolves and stuff that used to work just fine, end up being replaced with other stuff that work just as fine, until they are again replaced with something. And coders and code need to keep up, which means having to fix things that aren't broken yet.

[Antechinus]

That will probably do as a simple explanation for those who are determined to not get it.