Home

Set width for `PivotItem` in Office UI Fabric

%3CLINGO-SUB%20id%3D%22lingo-sub-975908%22%20slang%3D%22en-US%22%3ESet%20width%20for%20%60PivotItem%60%20in%20Office%20UI%20Fabric%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-975908%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20using%20Pivot%20and%20PivotItem%20from%20Office%20UI%20Fabric%20to%20display%20my%20content%20in%20tabs.%20Currently%20when%20the%20tab%20renders%2C%20all%20the%20tabs%20are%20left%20aligned.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F154239iCC10D15DF180E739%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22foobar.png%22%20title%3D%22foobar.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20need%20to%20display%20the%20tabs%20with%20equal%20width%20so%20that%20they%20occupy%20the%20100%25%20width%20of%20the%20page.%3CBR%20%2F%3EBelow%20is%20the%20code%20for%20Pivot.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CPIVOT%20linkformat%3D%22%7BPivotLinkFormat.tabs%7D%22%20linksize%3D%22%7BPivotLinkSize.large%7D%22%20styles%3D%22%7BpivotStyles%7D%22%3E%3CBR%20%2F%3E%3CPIVOTITEM%20headertext%3D%22%26quot%3BFoo%26quot%3B%22%3E%3CBR%20%2F%3E%3CLABEL%3EPivot%20%231%3C%2FLABEL%3E%3CBR%20%2F%3E%3C%2FPIVOTITEM%3E%3CBR%20%2F%3E%3CPIVOTITEM%20headertext%3D%22%26quot%3BBar%26quot%3B%22%3E%3CBR%20%2F%3E%3CLABEL%3EPivot%20%232%3C%2FLABEL%3E%3CBR%20%2F%3E%3C%2FPIVOTITEM%3E%3CBR%20%2F%3E%3CPIVOTITEM%20headertext%3D%22%26quot%3BBas%26quot%3B%22%3E%3CBR%20%2F%3E%3CLABEL%3EPivot%20%233%3C%2FLABEL%3E%3CBR%20%2F%3E%3C%2FPIVOTITEM%3E%3CBR%20%2F%3E%3CPIVOTITEM%20headertext%3D%22%26quot%3BBiz%26quot%3B%22%3E%3CBR%20%2F%3E%3CLABEL%3EPivot%20%234%3C%2FLABEL%3E%3CBR%20%2F%3E%3C%2FPIVOTITEM%3E%3CBR%20%2F%3E%3C%2FPIVOT%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBelow%20is%20the%20code%20that%20I%20could%20figure%20out%20to%20add%20styles%20to%20Pivot.%20But%20we%20do%20not%20have%20styles%20attribute%20for%20PivotItem.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3Econst%20pivotStyles%3AIPivotStyles%20%3D%20%7B%3CBR%20%2F%3Elink%3A%20%7B%7D%2C%3CBR%20%2F%3ElinkContent%3A%20%7B%7D%2C%3CBR%20%2F%3ElinkIsSelected%3A%20%7B%7D%2C%3CBR%20%2F%3Etext%3A%20%7B%7D%2C%3CBR%20%2F%3Eicon%3A%20%7B%7D%2C%3CBR%20%2F%3Ecount%3A%20%7B%7D%2C%3CBR%20%2F%3Eroot%3A%20%7B%3CBR%20%2F%3E%2F%2Fbackground%3A%20DefaultPalette.greenDark%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3B%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EHow%20can%20I%20apply%20style%20to%20PivotItem%20so%20that%20I%20can%20add%20width%20to%20it%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-975908%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ECSS%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Eoffice%20ui%20fabric%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPivot%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EReact%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Etypescript%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Occasional Visitor

I am using Pivot and PivotItem from Office UI Fabric to display my content in tabs. Currently when the tab renders, all the tabs are left aligned.

 

foobar.png

 

I need to display the tabs with equal width so that they occupy the 100% width of the page.
Below is the code for Pivot.

 

<Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} styles={pivotStyles}>
<PivotItem headerText="Foo">
<Label>Pivot #1</Label>
</PivotItem>
<PivotItem headerText="Bar">
<Label>Pivot #2</Label>
</PivotItem>
<PivotItem headerText="Bas">
<Label>Pivot #3</Label>
</PivotItem>
<PivotItem headerText="Biz">
<Label>Pivot #4</Label>
</PivotItem>
</Pivot>

 

Below is the code that I could figure out to add styles to Pivot. But we do not have styles attribute for PivotItem.


const pivotStyles:IPivotStyles = {
link: {},
linkContent: {},
linkIsSelected: {},
text: {},
icon: {},
count: {},
root: {
//background: DefaultPalette.greenDark
}
};


How can I apply style to PivotItem so that I can add width to it?