tabpane amexio custom styling fixed.

blmsl · Aug 8, 2017 · 64b528b · 64b528b
1 parent 3b49a9f
commit 64b528b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/tabpane/tabpane.component.ts b/src/tabpane/tabpane.component.ts
@@ -10,16 +10,16 @@ declare var $: any;
 
     <div [attr.id]="elementId" (window:resize)="onResize($event)">
     <div (click)="leftClick()" class="amexio-tabpane-scroller amexio-tabpane-scroller-left" >
-      <span style="display: none;"  [attr.id]="'left-'+elementId"><i class="fa fa-caret-left fa-2x" aria-hidden="true"></i></span>
+      <span class="amexio-tabpane-hide-span"  [attr.id]="'left-'+elementId"><i class="fa fa-caret-left fa-2x" aria-hidden="true"></i></span>
     </div>
     <div (click)="rightClick()" class="amexio-tabpane-scroller amexio-tabpane-scroller-right">
-      <span  style="display: block"  [attr.id]="'right-'+elementId"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></span>
+      <span class="amexio-tabpane-display-span" [attr.id]="'right-'+elementId"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></span>
     </div>
     
     <div class="amexio-tabpane-wrapper" [attr.id]="'amexio-tabpane-wrapper-'+elementId">
       <ul class="nav nav-tabs" role="tablist" [attr.id]="'list-'+elementId">
         <li class="nav-item" *ngFor="let tab of tabs" >
-          <a [class]="getTabClass(tab)" data-toggle="tab"  role="tab" [ngClass]="{'active':tab.active}" style="cursor: pointer;" (click)="activateTab(tab.elementId)" [attr.id]="tab.elementId" >&nbsp;{{tab.title}}&nbsp;&nbsp;<a *ngIf="closable" id="'closable-'+{{tab.elementId}}" style="vertical-align: top; cursor: pointer;" (click)="closeTab(tab.elementId)">&times;</a></a>
+          <a [class]="getTabClass(tab)" data-toggle="tab"  role="tab" [ngClass]="{'active':tab.active}" style="cursor: pointer;" (click)="activateTab(tab.elementId)" [attr.id]="tab.elementId" >&nbsp;{{tab.title}}&nbsp;&nbsp;<a *ngIf="closable" id="'closable-'+{{tab.elementId}}" class="amexio-tabpane-closeicon-position" (click)="closeTab(tab.elementId)">&times;</a></a>
         </li>
       </ul>
     </div>

diff --git a/src/tabpane/tabpane.custom.css b/src/tabpane/tabpane.custom.css
@@ -38,3 +38,13 @@
 .amexio-tabpane-scroller-left {
     float:left;
 }
+.amexio-tabpane-hide-span{
+    display: none;
+}
+.amexio-tabpane-display-span{
+    display: block;
+}
+.amexio-tabpane-closeicon-position{
+    vertical-align: top;
+    cursor: pointer;
+}