MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix bug in slider-tabs with max-width in vertical tabs

This commit is contained in:
Konstantinos Triantafyllou 2023-04-05 12:16:40 +03:00
parent 9025836af4
commit 6dafcb391a
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
sharedComponents/tabs/slider-tabs.component.ts
View File

@ -27,21 +27,21 @@ declare var UIkit;
[attr.uk-switcher]="type === 'static'?('connect:' + connect):null" [attr.uk-switcher]="type === 'static'?('connect:' + connect):null"
[ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass"> [ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
<ng-container *ngIf="type === 'static'"> <ng-container *ngIf="type === 'static'">
<li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block"> <li *ngFor="let tab of leftTabs" [ngStyle]="" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block">
<a>{{tab.title}}</a> <a>{{tab.title}}</a>
</li> </li>
<li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''" <li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
class="uk-text-capitalize uk-text-truncate uk-display-block"> class="uk-text-capitalize uk-text-truncate uk-display-block">
<a [ngClass]="tab.customClass">{{tab.title}}</a> <a [ngClass]="tab.customClass">{{tab.title}}</a>
</li> </li>
</ng-container> </ng-container>
<ng-container *ngIf="type === 'dynamic'"> <ng-container *ngIf="type === 'dynamic'">
<li *ngFor="let tab of leftTabs; let i=index;" [class.uk-active]="tab.active" style="max-width: 50%"> <li *ngFor="let tab of leftTabs; let i=index;" [class.uk-active]="tab.active" [style.max-width]="(position === 'horizontal')?'50%':null">
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass" <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
(click)="showActive(i)" (click)="showActive(i)"
class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a> class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
</li> </li>
<li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [class.uk-active]="tab.active" <li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" [class.uk-active]="tab.active"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"> [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''">
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass" <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
(click)="showActive(i)" (click)="showActive(i)"
@ -49,10 +49,10 @@ declare var UIkit;
</li> </li>
</ng-container> </ng-container>
<ng-container *ngIf="type === 'scrollable'"> <ng-container *ngIf="type === 'scrollable'">
<li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block" [class.uk-active]="tab.active"> <li *ngFor="let tab of leftTabs" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block" [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a> <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
</li> </li>
<li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block" <li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
[class.uk-active]="tab.active"> [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a> <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>