Add div to tab header area

[John]

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?

[Satheesh Kumar Balasubramanian]

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>