0

How can we do padding left in office fabric UI CSS for pivot component , Want to padding of Pivot component its working on develoepr tool added screenshot for same but not able to override through css in my solution

<Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} >
    <PivotItem headerText="Current" itemIcon="Recent">
        <Label></Label>
    </PivotItem>
</Pivot>

enter image description here

enter image description here

  • Have you tried adding your custom class and CSS? Can you add any screenshot of how it is showing currently? – Ganesh Sanap Sep 25 at 9:56
  • yes but not working – kumar Sep 25 at 9:57
  • How exactly you want to show it? Can you add any screenshot or something? Where you want to add left padding? on <Pivot> or <PivotItem>? – Ganesh Sanap Sep 25 at 10:02
  • without padding its not align with below component – kumar Sep 25 at 10:06
1

You can wrap the Pivot component inside a div element and add your custom style to it like:

<div className={styles.pivotWrapper}>
    <Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} >
        <PivotItem headerText="Current" itemIcon="Recent">
            <Label></Label>
        </PivotItem>
    </Pivot>
</div>

.pivotWrapper {
    /*Your custom CSS goes here*/
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.