0

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.

enter image description here

But i can only develop like this. enter image description here

i need to display that tab underline full width like shown in first picture. please help me with this.

  • syncfusion html
<div class="container-fluid">
    <div class="row">
      <div class="col-sm-4">
        <p><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#0d6efd" class="bi bi-arrow-left" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="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"/>
        </svg> Back to Previous </p>
      </div>    
      <div class="col-sm-12" >
        <ejs-tab #tab id="element" heightAdjustMode='Auto' overflowMode='popup' (selected)='onTabSelect($event)'
          [selectedItem]="item" >
          <e-tabitems>
              <e-tabitem [header]='headerText[0]' ></e-tabitem>
              <e-tabitem [header]='headerText[1]'></e-tabitem>
              <e-tabitem [header]='headerText[2]'></e-tabitem>
              <e-tabitem [header]='headerText[3]'></e-tabitem>
              <e-tabitem [header]='headerText[4]'></e-tabitem>
              <e-tabitem [header]='headerText[5]'></e-tabitem>
              <e-tabitem [header]='headerText[6]'></e-tabitem>
              <e-tabitem [header]='headerText[7]'></e-tabitem>
              <e-tabitem [header]='headerText[8]'></e-tabitem>
          </e-tabitems>
        </ejs-tab>
      </div>
    </div>
  </div>
chethan
  • 42
  • 10

2 Answers2

0

Give border-bottom to "Back to previous" div?

<div class="col-sm-4" style="border-bottom: 2px solid gray">
Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
0

It is not possible to show full tab underline for tabs using property (or) methods. Also, we have prepared sample to replicate your issue based on the shared snippets. But, custom element and tab not rendered in same row.

Can you please share the below details which will help us to provide solution using customized style if possible?

  • Replicate the issue in below sample (or) share issue replicating
    sample if possible

  • Share all the style related code snippets

https://stackblitz.com/edit/angular-tab-full-width?file=app.component.html

Venky
  • 1
  • 1