Add option to set margins on Section

[ztrhgf]

Hi, I would really appreciate an option to set margins on Sections. It could improve readability in cases when you display multiple Sections in rows on the page.

Thanks!

[PrzemyslawKlys]

Actually, I just sit down to this and it seems you already have an option to play with custom HTML for section styles

$DataTable = @(
    [PSCustomObject] @{ Name = 'Service Desk 1'; Incidents = 1; Resolved = 0; Year = 2001 }
    [PSCustomObject] @{ Name = 'Service Desk 2'; Incidents = 20; Resolved = 15; Year = 2002 }
    [PSCustomObject] @{ Name = 'Service Desk 3'; Incidents = 40; Resolved = 19; Year = 2003 }
    [PSCustomObject] @{ Name = 'Service Desk 4'; Incidents = 15; Resolved = 25; Year = 2004 }
    [PSCustomObject] @{ Name = 'Service Desk 5'; Incidents = 10; Resolved = 19; Year = 2005 }
    [PSCustomObject] @{ Name = 'Service Desk 6'; Incidents = 45; Resolved = 45; Year = 2006 }
    [PSCustomObject] @{ Name = 'Service Desk 7'; Incidents = 18; Resolved = 15; Year = 2007 }
    [PSCustomObject] @{ Name = 'Service Desk 8'; Incidents = 60; Resolved = 50; Year = 2008 }
    [PSCustomObject] @{ Name = 'Service Desk 9'; Incidents = 18; Resolved = 5; Year = 2009 }
    [PSCustomObject] @{ Name = 'Service Desk 0'; Incidents = 9; Resolved = 2; Year = 2010 }
)

New-HTML {
    $SectionStyle1 = New-HTMLSectionStyle -RequestConfiguration
    Add-HTMLStyle -Placement Header -Css @{
        "$($SectionStyle1.SectionHead)" = @{
            'background-color' = 'yellow'
            'font-size'        = '50px'
        }
        "$($SectionStyle1.Section)"     = @{
            'margin' = '10px'
            'width'  = 'calc(100% - 20px)'
        }
    } -SkipTags
    New-HTMLSection -HeaderText 'Test' {
        for ($i = 0; $i -le 5; $i++) {
            New-HTMLTable -DataTable $DataTable -HideFooter
        }
    } -Direction column -StyleSheetsConfiguration $SectionStyle1
} -ShowHTML -Online -FilePath $PSScriptRoot\Example-SectionCustomStyle.html

[PrzemyslawKlys]

But I guess we should have something built-in

[PrzemyslawKlys]

Import-Module .\PSWriteHTML.psd1 -Force

#$Process = Get-Process | Select-Object -First 30
$ProcessSmaller = Get-Process | Select-Object -First 1

New-HTML -Name 'Test' -FilePath "$PSScriptRoot\Example27-01.html" -Show {
    New-HTMLSection -HeaderText 'Test Header' -HeaderTextSize 20 {
        New-HTMLSection -HeaderText 'Test 1' -CanCollapse -Collapsed {
            New-HTMLTable -DataTable $ProcessSmaller
        }
        New-HTMLSection -HeaderText 'Test 2' -CanCollapse -Collapsed {
            New-HTMLTable -DataTable $ProcessSmaller
        } -Margin 20px
    }
    New-HTMLSection -Collapsed -CanCollapse {
        New-HTMLPanel {
            New-HTMLChart -Gradient {
                New-ChartPie -Name 'Test' -Value 20
                New-ChartPie -Name 'Test1' -Value 30
                New-ChartPie -Name 'Test2' -Value 40
                New-ChartPie -Name 'Test1' -Value 30
                New-ChartPie -Name 'Test2' -Value 40
            }
        }
        New-HTMLPanel {
            New-HTMLChart -Gradient {
                New-ChartPie -Name 'Test' -Value 20
                New-ChartPie -Name 'Test1' -Value 30
                New-ChartPie -Name 'Test2' -Value 40
                New-ChartPie -Name 'Test1' -Value 30
                New-ChartPie -Name 'Test2' -Value 40
            }
        }
    } -Margin 50px
    New-HTMLSection -Invisible {
        New-HTMLSection -HeaderText 'Test 1' {
            New-HTMLTable -DataTable $ProcessSmaller
        }
        New-HTMLSection -HeaderText 'Test 2' {
            New-HTMLTable -DataTable $ProcessSmaller
        }
        New-HTMLSection -HeaderText 'Test 3' {

        }
    }
    New-HTMLSection -HeaderText 'Test Invisibility' {
        New-HTMLSection -Invisible {
            New-HTMLSection -HeaderText 'Test 1' {
                New-HTMLTable -DataTable $ProcessSmaller
            }
            New-HTMLSection -HeaderText 'Test 2' {
                New-HTMLTable -DataTable $ProcessSmaller
            }
            New-HTMLSection -HeaderText 'Test 3' {

            }
        }
    }
} -Online -Format

This will be in new version