title: Display full width tab underline in syncfusion angular
body: <p>I am using syncfusion angular for UI in our application i am stucked with some UI thing . I need to display full width underline tabs like show in below image.</p>
  <p><a href="https://i.stack.imgur.com/gMogp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gMogp.png" alt="enter image description here" /></a></p>
  <p>But i can only develop like this.
  <a href="https://i.stack.imgur.com/nkPT4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nkPT4.png" alt="enter image description here" /></a></p>
  <p>i need to display that tab underline full width like shown in first picture. please help me with this.</p>
  <ul>
  <li>syncfusion html</li>
  </ul>
  <pre><code>&lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-sm-4&quot;&gt;
          &lt;p&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;20&quot; height=&quot;20&quot; fill=&quot;#0d6efd&quot; class=&quot;bi bi-arrow-left&quot; viewBox=&quot;0 0 16 16&quot;&gt;
            &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z&quot;/&gt;
          &lt;/svg&gt; Back to Previous &lt;/p&gt;
        &lt;/div&gt;    
        &lt;div class=&quot;col-sm-12&quot; &gt;
          &lt;ejs-tab #tab id=&quot;element&quot; heightAdjustMode='Auto' overflowMode='popup' (selected)='onTabSelect($event)'
            [selectedItem]=&quot;item&quot; &gt;
            &lt;e-tabitems&gt;
                &lt;e-tabitem [header]='headerText[0]' &gt;&lt;/e-tabitem&gt;
                &lt;e-tabitem [header]='headerText[1]'&gt;&lt;/e-tabitem&gt;
                &lt;e-tabitem [header]='headerText[2]'&gt;&lt;/e-tabitem&gt;
                &lt;e-tabitem [header]='headerText[3]'&gt;&lt;/e-tabitem&gt;
                &lt;e-tabitem [header]='headerText[4]'&gt;&lt;/e-tabitem&gt;
                &lt;e-tabitem [header]='headerText[5]'&gt;&lt;/e-tabitem&gt;
                &lt;e-tabitem [header]='headerText[6]'&gt;&lt;/e-tabitem&gt;
                &lt;e-tabitem [header]='headerText[7]'&gt;&lt;/e-tabitem&gt;
                &lt;e-tabitem [header]='headerText[8]'&gt;&lt;/e-tabitem&gt;
            &lt;/e-tabitems&gt;
          &lt;/ejs-tab&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>