Adding a Section Above Tabs

[swordfish291]

Hello,

Maybe I am missing something obvious here.
I am generating tabs through a loop. I want to add a section above the tabs. I tried adding a section in my script but it ends up getting inserted inside the first tab. It never shows up above the tabs. Any way to make this work?

Thank You

[PrzemyslawKlys]

There are 2 types of tabs and 2 ways to deal with it

• New tabs that were added in last few months that "work" when they are within New-HTMLTabPanel. If New-HTMLTab is used within New-HTMLTabPanel it enables the 2nd type of tabs and you can put them however you want and wherever you want. Even within section in section and in section. You can change how they look and how they are positioned as well

New-HTML {
    New-HTMLSectionOption -RemoveShadow -BorderRadius 0px
    New-HTMLSection -HeaderText 'This is just to show what you can do' -HeaderBackGroundColor Grey {
        New-HTMLTabPanel {
            New-HTMLTab -Name 'Standard Top Level Tabs 1' -IconBrands 500px {
                New-HTMLTabPanel -Orientation vertical {
                    New-HTMLTab -Name 'Standard Nested Level Tabs 2.1' -IconBrands 500px {
                        New-HTMLSection -Invisible {
                            New-HTMLSection -HeaderText 'My Section with nested tabs in section' {
                                New-HTMLTabPanel {
                                    New-HTMLTab -Name 'Test Tab with size 30' -IconBrands apple -IconSize 30 -TextSize 30 {
                                        New-HTMLTable -DataTable 'test'
                                    }
                                    New-HTMLTab -Name 'Test Tab with size 30 and chosen colors' -IconRegular address-book -IconColor Red -IconSize 30 -TextSize 30 -TextColor Blue {
                                        New-HTMLText -Color Red -FontSize 20 -Text "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
                                    }
                                }
                            }
                            New-HTMLSection -HeaderText 'Another section' {
                                New-HTMLTable -DataTable 'test 1'
                            }
                        }
                    }
                    New-HTMLTab -Name 'Standard Nested Level Tabs 2.2' -IconBrands 500px {
                        New-HTMLText -Text "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
                    }
                    New-HTMLTab -Name 'Standard Nested Level Tabs 2.3' -IconBrands 500px {
                        New-HTMLText -Color Red -FontSize 20 -Text "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
                    }
                    New-HTMLTab -Name 'Standard Nested Level Tabs 2.4' -IconBrands 500px {
                        New-HTMLText -Color Green -FontSize 10px -Text "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
                    }
                    New-HTMLTab -Name 'Standard Nested Level Tabs 2.5' -IconBrands 500px {
                        New-HTMLText -Color Green -FontSize 10pt -Text "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
                        New-HTMLTable -DataTable 'Test Content on 5th vertical tab'
                    }
                }
            }
            New-HTMLTab -Name 'Standard Top Level Tabs 2' -IconRegular address-book {
                New-HTMLTable -DataTable 'test 3'
            }
        }

    }
    New-HTMLSection -HeaderText 'Another section' -HeaderBackGroundColor Grey {
        New-HTMLTabPanel -Orientation vertical {
            New-HTMLTab -Name 'More tabs 1' {
                New-HTMLSection -HeaderText 'OK 1' {
                    New-HTMLTable -DataTable 'Test 1'
                }
            }
            New-HTMLTab -Name 'More tabs 2' {
                New-HTMLSection -HeaderText 'OK 2' {
                    New-HTMLTable -DataTable 'Test 2'
                }
            }
            New-HTMLTab -Name 'More tabs 3' {
                New-HTMLSection -HeaderText 'OK 3' {
                    New-HTMLTable -DataTable 'Test 3'
                }
            }
            New-HTMLTab -Name 'More tabs 4' {
                New-HTMLSection -HeaderText 'OK 4' {
                    New-HTMLTable -DataTable 'Test 4'
                }
            }
        }
    }
} -Online -ShowHTML -FilePath $PSScriptRoot\Example-TabsInLine04.html

• If you don't use New-HTMLTabPanel "old" type of tabs is used and it assumes they are top-level tabs so even if you put something above it, it's still inserted on top. However tabs are inserted into main element of the body, and it's possible to add stuff into header of
  the body using New-HTMLHeader. This forces any content to be inserted to header above tabs.

$Test1 = Get-Process | Select-Object -First 1 -Property Name, Id, PriorityClass

New-HTML -TitleText 'My title' -Online -FilePath $PSScriptRoot\Example27-06.html -Show {
    New-HTMLHeader {
        New-HTMLAnchor -Id 'top'
        New-HTMLSection -Invisible {
            New-HTMLPanel {
                New-HTMLAnchor -Href '#LastSection' -Text 'Link to last section in hidden panel'
            } -Invisible
            New-HTMLPanel {
                New-HTMLAnchor -Href '#LastPanel' -Text 'Link to last panel in hidden panel but to the right'
            } -Invisible -AlignContentText right
        }
        New-HTMLSection -Invisible {
            New-HTMLSection {
                New-HTMLAnchor -Href '#LastSection' -Text 'Link to last section in hidden section'
            } -Invisible
            New-HTMLSection {
                New-HTMLAnchor -Href '#LastPanel' -Text 'Link to last section in hidden section but to the right'
            } -Invisible -JustifyContent flex-end
        }
    }
    # New-HTMLMain is not nessecary but I like to use it when Header/Footer are present to distinguish how things are placed
    New-HTMLMain {
        New-HTMLTab -Name 'Tab 1' -AnchorName 'Tab1' {
            New-HTMLSectionStyle -RemoveShadow -BorderRadius 0px
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            } -BorderRadius 15px
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLSection -HeaderText 'Default Section Style' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            # Keep in mind if you start using AnchorName you need to keep uniquness yourself
            New-HTMLSection -HeaderText 'Default Section Style' -AnchorName 'LastSection' {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
        }
        New-HTMLTab -Name 'Tab 2' -AnchorName 'Tab2' {
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLAnchor -Name 'This is link' -HrefLink 'https://evotec.xyz' -Text 'Visit Evotec'
            } -AlignContentText center -BackgroundColor Yellow -BorderRadius 0px
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            }
            New-HTMLPanel {
                New-HTMLTable -DataTable $Test1 -HideFooter
            } -AnchorName 'LastPanel'
        }
    }
    New-HTMLFooter {
        New-HTMLAnchor -Href '#top' -Text 'Link to top'
    }
}