We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Add div to tab header area

I have a tab set (width 100%) with only two tabs.  There is a lot of unused area to the right of the tab headers that I would like to add content.   What is the best way to accomplish that?  

The screenshot below shows my current layout.  The red outline is where I'd like to place a DIV with some content.  (right-aligned).  My brain is a little foggy this morning, as I think this would be a simple task.  Can you help me?


Tabs with floating panel.png



1 Reply

SK Satheesh Kumar Balasubramanian Syncfusion Team November 14, 2022 09:22 AM

We regret to inform you that a div element will behave like a tab header by default if it is rendered inside a tab header. Therefore, rendering a div element in a tab header is not possible. To achieve your requirement, you must customise the div element in accordance with your needs, as illustrated below.

https://stackblitz.com/edit/javascript-add-div-tab-header?file=index.ts,index.html


index.js:

let contentToolbarTemplate: string =

  '<button class="custom-item ">Custom content</button>';

let tabContentToolbar: Element = createElement('div', {

  className: 'content-toolbar',

  innerHTML: contentToolbarTemplate,

});

//Initialize Tab component

let tabObj: Tab = new Tab({

  created: onTabCreate,

  items: [

    {

      header: { text: 'Twitter' },

      content:

        'Twitter is an online social networking service that enables users to send and read short 140-character ' +

        'messages called tweets. Registered users can read and post tweets, but those who are unregistered can only read ' +

        'them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San ' +

        'Francisco and has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, ' +

        'Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, ' +

        'with more than 100 million users posting 340 million tweets a day in 2012. The service also handled 1.6 billion ' +

        'search queries per day.',

    },

    {

      header: { text: 'Facebook' },

      content:

        'Facebook is an online social networking service headquartered in Menlo Park, California. Its website was ' +

        'launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo ' +

        "Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes. The founders had initially limited the website's " +

        'membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford ' +

        'University. It gradually added support for students at various other universities and later to high-school students.',

    },

  ],

});

//Render initialized Tab component

tabObj.appendTo('#tab_default');

function onTabCreate(): void {

  let tabHeaderElement: HTMLElement = (

    document.querySelectorAll('#tab_default .e-tab-header') as any

  )[0];

  tabHeaderElement.appendChild(tabContentToolbar);

}

index.html:

    <style>

      body {

        touch-action: none;

      }

      .content-toolbar {

        position: absolute;

        right: 0px;

        top: 10px;

        display: inline-flex;

      }

    </style>


Loader.
Live Chat Icon For mobile
Up arrow icon