Items alignment in section

[amanfromfrance]

Hello,

I am struggling with the items alignment in a section: I'd like them to be centered but it seems that the commands are ineffective... or that I am using them incorrectly.

Below is my code:

New-HTMLSection -Invisible {
	
	New-HTMLChart -Title 'Maximum Number of simultaneous WebRTC Participants' -TitleAlignment center {
		New-ChartBarOptions -Type barStacked
		New-ChartLegend -Name 'EMEA', 'NAM', 'APAC' -Color "#000000", "#ff7900", "#8f8f8f"
		foreach ($Object in $cmsMaxNumberOfDetailedParticipants) {
			New-ChartBar -Name $Object.date -Value $Object.emeaMaxNumberOfWebRtcParticipants, $Object.namMaxNumberOfWebRtcParticipants, $Object.apacMaxNumberOfWebRtcParticipants
		}
	}
	$SectionStyle1 = New-HTMLSectionStyle -AlignItems center -AlignContent center
	New-HTMLSection -Invisible {
		New-HTMLTable -DataTable $cmsMaxNumberOfDetailedParticipants -ScrollX -Title 'Total WebRTC Ports Usage Summary' -HideFooter -DisableButtons -DisablePaging -DisableSearch -AutoSize {
			New-HTMLTableStyle -TextAlign center
			New-TableHeader -Title 'Stats' -Color White -ColumnCount 1 -BackGroundColor White
			New-TableHeader -Title 'Total WebRTC Ports Usage Summary' -Color White -ColumnCount 12 -Alignment center -FontSize 12 -FontWeight bold -BackGroundColor "#000000"
			New-TableHeader -Names 'date' -Title "" -Color White -Alignment center -BackGroundColor "#8f8f8f"
			New-HTMLTableCondition -Name 'date' -ComparisonType string -Operator contains -Value " " -FontWeight bold -Color "#50BE87" -HighlightHeaders 'date'
			New-HTMLTableCondition -Name 'emeaMaxPercentageOfWebRtcParticipants' -ComparisonType string -Operator contains -Value "%" -FontWeight bold -Color "#4BB4E6" -HighlightHeaders 'emeaMaxPercentageOfWebRtcParticipants'							
			New-HTMLTableCondition -Name 'namMaxPercentageOfWebRtcParticipants' -ComparisonType string -Operator contains -Value "%" -FontWeight bold -Color "#4BB4E6" -HighlightHeaders 'namMaxPercentageOfWebRtcParticipants'
			New-HTMLTableCondition -Name 'apacMaxPercentageOfWebRtcParticipants' -ComparisonType string -Operator contains -Value "%" -FontWeight bold -Color "#4BB4E6" -HighlightHeaders 'apacMaxPercentageOfWebRtcParticipants'
		} -FreezeColumnsLeft 1
	} -StyleSheetsConfiguration $SectionStyle1
}

I use the New-HTMLSectionStyle styling object to center the table but it does not work, the table is always displayed at the top:

I also tried to use the -AlignItems center -AlignContent center in the New-HTMLSection declaration but the result is the same.

Have you succeeded in using these parameters?

Thanks!

[PrzemyslawKlys]

It depends on what you want to center. Do you want to move down the table? so it's centered vertically against the left side (charts)?

What is your expectation?

Sections are based on flex containers:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

So I would expect you first need to give it static sizing for height, otherwise, it will always pick the size of content, maybe play a bit with flex-direction - if anything fails you could play with margins and position it manually.

[amanfromfrance]

You're correct, I'd like to center it vertically against the left chart.

I've found this link in your code where the align-Items is described and seems to fit my requirements.

That's why I used the AlignItems parameter in the Section.

[PrzemyslawKlys]

Right, but you need to take into consideration other settings. Try setting static size

[amanfromfrance]

Ok will try!

[amanfromfrance]

That was it: setting the height parameter on each Section hosting a table did the trick:

Thanks for your help!