This feature is required as we are having long breadcrumb names and we want to show all the breadcrumb in one line for mobile devices. I am able to achieve it using some CSS as below:
breadcrumb1 > breadcrumb2 > breadcr...
The last breadcrumb is shorten ( breadcr...) due to space constraint on mobile devices. I want to show the breadcrumb name on hover/touch as tooltip, so that user can read it. This can be achieved by adding "title" attribute for breadcrumb a/span tag as below:
below code is from file "breadcrumbs.component.ts".
<a *ngIf="!last" [routerLink]="hasParams(breadcrumb)"> {{breadcrumb.label}}</a> <span *ngIf="last">{{ breadcrumb.label }}</span>
Updating it to below code will achieve it:
<a *ngIf="!last" title="{{breadcrumb.label}}" [routerLink]="hasParams(breadcrumb)"> {{breadcrumb.label}}</a> <span *ngIf="last" title="{{breadcrumb.label}}">{{ breadcrumb.label }}</span>
Hello Developers,
This feature is required as we are having long breadcrumb names and we want to show all the breadcrumb in one line for mobile devices. I am able to achieve it using some CSS as below: breadcrumb1 > breadcrumb2 > breadcr...
The last breadcrumb is shorten ( breadcr...) due to space constraint on mobile devices. I want to show the breadcrumb name on hover/touch as tooltip, so that user can read it. This can be achieved by adding "title" attribute for breadcrumb a/span tag as below:
below code is from file "breadcrumbs.component.ts".
<a *ngIf="!last" [routerLink]="hasParams(breadcrumb)"> {{breadcrumb.label}}</a> <span *ngIf="last">{{ breadcrumb.label }}</span>Updating it to below code will achieve it:
<a *ngIf="!last" title="{{breadcrumb.label}}" [routerLink]="hasParams(breadcrumb)"> {{breadcrumb.label}}</a> <span *ngIf="last" title="{{breadcrumb.label}}">{{ breadcrumb.label }}</span>