Justifying content in tab header

[Walter Cook]

<div class="e-tab-header" headerStyle="e-background" width = "1400px">

       

            <div>Requirement Detail</div>

            <div>Sources</div>

            <div>Customers</div>

            <div>Compliance</div>

            <div>Tags</div>

            <div>Reports</div>

        <div class="button-row" style="float:right;" >

            <button mat-flat-button>in tab header</button>

          </div>  

        

     </div> <!--end tab header-->

        <div class="button-row" style="float:right; ">

            <button mat-flat-button>outside tab header</button>

        </div>

I am trying to left-justify the tabs and right-justify the button. In the screenshot, the purple line is the right border of the tab header. The button inside the header should be there while the tabs themselves stay put. How can I achieve this?

Thank you Walter

Attachment: tab_header_dcce11ed.zip

[Ravikumar Venkatesan]

Hi Walter,

Greetings from Syncfusion support.

We have validated your query “Justifying content in tab header” at our end. We suspect that you need to align the tab headers with buttons that need to be aligned on the right side of the tab and we have achieved it with help of the code mentioned below.

[app.component.html]

<ejs-tab #htmlTab cssClass="html-tab" (created)="afterCreated()">

</ejs-tab>

[app.component.ts]

export class AppComponent {

    @ViewChild('htmlTab') tab: TabComponent;

 

    public afterCreated() {

        if (this.tab && this.tab.element) {

            const buttons: HTMLElement[] = [].slice.call(this.tab.element.querySelectorAll('.custom-btn')) as HTMLElement[];

            for (const button of buttons) {

                const toolbarItem: HTMLElement = (button as HTMLElement).closest('.e-toolbar-item');

                toolbarItem.style.position = 'inherit';

                toolbarItem.style.float = 'right';

            }

        }

    }

}

[app.component.css]

.html-tab.e-tab .e-tab-header .e-toolbar-items {

    width: 100%;

}

Sample: https://stackblitz.com/edit/ej2-angular-tab-align-tab-header-items?file=app.component.html,app.component.css,app.component.ts

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

[Walter Cook]

That's fantastic! No way I would have come up with that.

Thank you.

[Satheesh Kumar Balasubramanian]

You are most welcome!!!

[Walter Cook]

The right-justification is great.

I'm looking for the buttons to just be buttons, not select tabs. Is that possible?

Can you lay a button in the header but not act like a tab control?

Cheers

[Ruksar Moosa Sait]

Hi Walter,

We have checked on your requirement and let you know that it is possible to render a button in the tab header, but not possible to make it not behave like a tab component.

Regards,

Ruksar Moosa Sait