breadcrumb items are flashing when adjust browser window to small size then mouse over breadcrumb.

[mm-ryo]

Hi, Please follow below steps to replicate this issue:

1. adjust the preview area or browser window to a small size.
2. mouse over to breadcrumb

https://stackblitz.com/edit/integralui-breadcrumb-overview-g8zj36

[Lidor-Systems]

Thank you for letting us know, we will fix it ASAP.

[Lidor-Systems]

Showing items from Breadcrumb component in multiple lines, should not happen. As we suspected this is due some CSS settings from older version.

This problem is from earlier version of Breadcrumb, the sample project has CSS styles settings (in app.component.css file) from 19.1, but the component is from 19.4, which causes interference.

We have updated the online sample on StackBlitz, which now includes only CSS settings for icons (this is only required for StackBlitz, due to their image/icons restrictions). The component, uses its own style settings from integralui.module.css.

Whenever the total path is larger than Breadcrumb width, the component will show only the last items with a menu button in front from where you can choose other parent items (up to the path root).

The Breadcrumb should always show the tree path in ONE LINE.

[mm-ryo]

Showing items from Breadcrumb component in multiple lines, should not happen. As we suspected this is due some CSS settings from older version.

This problem is from earlier version of Breadcrumb, the sample project has CSS styles settings (in app.component.css file) from 19.1, but the component is from 19.4, which causes interference.

We have updated the online sample on StackBlitz, which now includes only CSS settings for icons (this is only required for StackBlitz, due to their image/icons restrictions). The component, uses its own style settings from integralui.module.css.

Whenever the total path is larger than Breadcrumb width, the component will show only the last items with a menu button in front from where you can choose other parent items (up to the path root).

The Breadcrumb should always show the tree path in ONE LINE.

Hi, Could you take a look at this sample? I just want to place a button on the right to breadcrumb. but it still got this issue. thanks.

.header {
  display: inline-flex;
}

Sample: https://stackblitz.com/edit/integralui-breadcrumb-overview-tgjyxz Expected behavior: The buttons could be displayed inline with breadcrumb on right.

[Lidor-Systems]

You can solve this in CSS. Because Breadcrumb will appear inline with other elements (buttons in this case), you can set it with display as inline-block, but it must have a width set so that menu button appears.

Here is a what you need to do in CSS:

.header {
  /* display: inline-flex; you don't need this*/
  border: thin solid #cecece;
}
.iui-breadcrumb {
  border: 0;
}
.breadcrumb {
  display: inline-block;
  padding: 2px;
  vertical-align: top;
  width: 400px;
}
.buttons {
  display: inline-block;
  float: right;
  margin: 5px 5px 0 3px;
  vertical-align: top;
}

The result is:

You can change the width or set it with calc(100% - buttonsWidth), or create a responsive layout with two columns.

[mm-ryo]

You can solve this in CSS. Because Breadcrumb will appear inline with other elements (buttons in this case), you can set it with display as inline-block, but it must have a width set so that menu button appears.

Here is a what you need to do in CSS:

.header {
  /* display: inline-flex; you don't need this*/
  border: thin solid #cecece;
}
.iui-breadcrumb {
  border: 0;
}
.breadcrumb {
  display: inline-block;
  padding: 2px;
  vertical-align: top;
  width: 400px;
}
.buttons {
  display: inline-block;
  float: right;
  margin: 5px 5px 0 3px;
  vertical-align: top;
}

The result is:

You can change the width or set it with calc(100% - buttonsWidth), or create a responsive layout with two columns.

Hi, Why did I need to click the view or move over it the breadcrumb style being changed? And what's the expression for this *ngIf? On my side, if resize the window to only see 1 breadcrumb item, then this issue is still happening. I saw the expression value keeps changing.

And sometimes the display item is the root item, which is not the last item, e.g. : breadcrumb : A > B > C actual displayed: A (if I change the size of the container to only see 1 item, it should be C)

.breadcrumb {
  display: inline-block;
  padding: 2px;
  vertical-align: top;
  **width: calc(100% - 70px);**
}

And it the selected item is null, then breadcrumb will not be visible.

this.selItem = null

https://stackblitz.com/edit/integralui-breadcrumb-overview-tgjyxz

[Lidor-Systems]

Why did I need to click the view or move over it the breadcrumb style being changed?

This is because Angular can't detect changes when element resize. So when you move a mouse cursor over some element, it can trigger a change detection because on style changes.

As a solution we have updated the IntegralUIResize directive, which fires an event elemSizeChanged. This event holds data about the element size. Handling this event is optional.

To use this directive is simple (in your sample code):

<span class="breadcrumb" iuiResize>

Note You only need to add the iuiResize in the container that contains the Breadcrumb component, that is based on your sample code.

Because this directive throws an event, the Angular change detection is triggered, which also triggers the Breadcrumb to update its layout.

You can also set the interval by which a change in element size is detected:

<span class="breadcrumb" [iuiResize]="{ interval: 10 }">

This means, every 10ms a change detection is processed (the default is 100ms). If there is a change in element size, the elemSizeChanged event is thrown.

<span class="breadcrumb" [iuiResize]="{ interval: 10 }" (elemSizeChanged)="elemResize($event)">

. . .

elemResize(e: any){
      console.log(e);
}

We have also fixed the issue that caused flickering inside the Breadcrumb component. This was caused by multiple layout updates, that may happen if the size changes quickly. This is now fixed and the layout is updated only once after a short delay.

Please update your sample with IntegralUI Web 19.4.211, to see these changes in action.

Note As for appearance of expression for this *ngIf in the DOM, this is inserted by Angular. We don't have any settings like this in Breadcrumb internal HTML, so we don't know why this happens. But it is not relevant in any way.

And it the selected item is null, then breadcrumb will not be visible.

Yes, if there is no selection, the Breadcrumb can't know which path to show. You must have an item selected.

[mm-ryo]

Why did I need to click the view or move over it the breadcrumb style being changed?

This is because Angular can't detect changes when element resize. So when you move a mouse cursor over some element, it can trigger a change detection because on style changes.

As a solution we have updated the IntegralUIResize directive, which fires an event elemSizeChanged. This event holds data about the element size. Handling this event is optional.

To use this directive is simple (in your sample code):

<span class="breadcrumb" iuiResize>

Note You only need to add the iuiResize in the container that contains the Breadcrumb component, that is based on your sample code.

Because this directive throws an event, the Angular change detection is triggered, which also triggers the Breadcrumb to update its layout.

You can also set the interval by which a change in element size is detected:

<span class="breadcrumb" [iuiResize]="{ interval: 10 }">

This means, every 10ms a change detection is processed (the default is 100ms). If there is a change in element size, the elemSizeChanged event is thrown.

<span class="breadcrumb" [iuiResize]="{ interval: 10 }" (elemSizeChanged)="elemResize($event)">

. . .

elemResize(e: any){
      console.log(e);
}

We have also fixed the issue that caused flickering inside the Breadcrumb component. This was caused by multiple layout updates, that may happen if the size changes quickly. This is now fixed and the layout is updated only once after a short delay.

Please update your sample with IntegralUI Web 19.4.211, to see these changes in action.

Note As for appearance of expression for this *ngIf in the DOM, this is inserted by Angular. We don't have any settings like this in Breadcrumb internal HTML, so we don't know why this happens. But it is not relevant in any way.

And it the selected item is null, then breadcrumb will not be visible.

Yes, if there is no selection, the Breadcrumb can't know which path to show. You must have an item selected.

Hi, Could you let me know how you determine whether to hide/display the breadcrumb items? I just tested on my local with the latest package. if I adjust the container width less than the last breadcrumb item width, the issue comes out again. but I tested your demo it's working fine.

<div class="iui-breadcrumb-root-button" ng-reflect-ng-class="iui-breadcrumb-root-button" ng-reflect-ng-style="[object Object]" style="height: 27px;">
  <span class="iui-breadcrumb-root-button-box"></span>
</div>

[Lidor-Systems]

We are calculating the width of each item starting from the last in the selected path. If the sum width (check per item) exceeds the Breadcrumb client space width (reduced by the width of menu button even if it is not shown), the starting index is set to that item. All other parent items are hidden and the menu button appears, from where you can access them.

If you set the Breadcrumb width to be smaller than the last item width, the client space is actually the component width - menu button width. So the last item will be hidden, Breadcrumb is empty only showing the menu button.

We have notice a small flickering that may appear when the Breadcrumb width is too small (all items are hidden). This happens because at first all items are visible, so we can calculate their width, and then after a small delay the layout is updated so that only the items that can fit into the space are shown. Probably this is causing the flickering.

[Lidor-Systems]

The flickering when no items are visible appears in your sample, but when tested locally it doesn;t happen.

Anyway as a solution, we will set the opacity to 0 to all items and when update is completed, the opacity will be changed back to 1. This will solve the flickering in all cases. We will include this fix in the next update.

[mm-ryo]

The flickering when no items are visible appears in your sample, but when tested locally it doesn;t happen.

Anyway as a solution, we will set the opacity to 0 to all items and when update is completed, the opacity will be changed back to 1. This will solve the flickering in all cases. We will include this fix in the next update.

Hi, I think you set the opacity to 1 by Interval function which is not nice. it may be something wrong with CSS or js codes. could you help to double-check it? thanks

[Lidor-Systems]

We are going to create an article with online sample that shows a breadcrumb with custom toolbar on right. If any flickering occurs in the sample, we will fix it. The sample will be available very soon.

[mm-ryo]

We are going to create an article with online sample that shows a breadcrumb with custom toolbar on right. If any flickering occurs in the sample, we will fix it. The sample will be available very soon.

I think you can try to put it inside the below component.

"angular-split": "^3.0.3"

[Lidor-Systems]

We have created a new sample that shows a breadcrumb with toolbar on right side.

A detailed information on how this sample is created is available here: Breadcrumb with Toolbar Buttons in One Line.

Note Use the grip icon on far right side to resize the component on demand.

The Breadcrumb component is now optimized and flickering no longer happens. We have also added an option to clear the current path by setting the selectedItem to null. When this happens, the menu button will appear from where you can select a new path.

[mm-ryo]

We have created a new sample that shows a breadcrumb with toolbar on right side.

A detailed information on how this sample is created is available here: Breadcrumb with Toolbar Buttons in One Line.

Note Use the grip icon on far right side to resize the component on demand.

The Breadcrumb component is now optimized and flickering no longer happens. We have also added an option to clear the current path by setting the selectedItem to null. When this happens, the menu button will appear from where you can select a new path.

thanks a lot. when we can get these updates?