The horizontal scrollbar is still dispalyed when I collapsed the item with long title

[mm-ryo]

Please refer to the attached images IntegralUI TreeView for Angular 19.4.278 the problem is the horizontal scrollbar(length) that should be re-calculated when the item collapsed.

=> Correct behavior when the item with long title expanded, the horizontal scrollbar should be displayed

=> Wrong, when I collapse it the horizontal scrollbar should be hidden. I did update layout in onAfterExpand event handler.

Please do not close the issue when you have fixed it. I will verify it and close it.

[Lidor-Systems]

We have tried this, but it works in our example:

And when item is collapsed:

We have also added call to updateLayout in afterExpand event handler.

There is no horizontal scrollbar once the item with longest width is outside the view (in this case a child of collapsed parent).

[Lidor-Systems]

We have created a sample project based on latest release for temporary use: https://stackblitz.com/edit/integralui-treeview-overview-z3m18u

[mm-ryo]

We have tried this, but it works in our example:

And when item is collapsed:

We have also added call to updateLayout in afterExpand event handler.

There is no horizontal scrollbar once the item with longest width is outside the view (in this case a child of collapsed parent).

It's very strange, it doesn't work on my local. when you calculate the width. did you include padding and margin and board all of them? In the DIV container CSS we are using 'display: flex' I am not sure whether this causes the issue or not. And the breadcrumb issue is still there, it's just a little better than before. the item flickering is not very frequent. As we have purchased your license, May you share the source codes(without minify) with us? then I can debug it.

[mm-ryo]

We have created a sample project based on latest release for temporary use: https://stackblitz.com/edit/integralui-treeview-overview-z3m18u

Are you sure you have fixed this issue? https://stackblitz.com/edit/integralui-treeview-overview-vjldrc?file=src%2Fapp%2Fapp.component.ts

[Lidor-Systems]

when you calculate the width. did you include padding and margin and board all of them? We are using element offsetWidth to determine the width of the item content. This includes the border, padding and content height. The margin is not included in the offsetWidth, this is standard HTML setting.

The parent DIV block that contains your template DIV block is set with 'display:inline-block'. Using flex should not affect this issue, because the calculation of the item content width is taken from the parent container DIV. But you need to test it on your side, to see whether the problem is caused by setting display to flex.

We have changed the label of Recycle Bin in the sample project, but it works. We can see a difference in label font, from the sample and your screenshot:

The font should not matter in determining the item width, because it is taken from the element offset width. However, to see what is going on, please apply changes to the sample from your local project.

Note We have tried using different fonts with different sizes, still the horizontal scrollbar appears correctly and the longest item is shown in full.

And the breadcrumb issue is still there, it's just a little better than before. the item flickering is not very frequent. As we have purchased your license, May you share the source codes(without minify) with us? then I can debug it.

Can you provide a sample that shows the issue with breadcrumb as much as possible close to the settings in your local project?

As for the source code, you don't have a license for it. You have purchased a Professional license, which doesn't include the source code.

[mm-ryo]

when you calculate the width. did you include padding and margin and board all of them? We are using element offsetWidth to determine the width of the item content. This includes the border, padding and content height. The margin is not included in the offsetWidth, this is standard HTML setting.

The parent DIV block that contains your template DIV block is set with 'display:inline-block'. Using flex should not affect this issue, because the calculation of the item content width is taken from the parent container DIV. But you need to test it on your side, to see whether the problem is caused by setting display to flex.

We have changed the label of Recycle Bin in the sample project, but it works. We can see a difference in label font, from the sample and your screenshot:

The font should not matter in determining the item width, because it is taken from the element offset width. However, to see what is going on, please apply changes to the sample from your local project.

Note We have tried using different fonts with different sizes, still the horizontal scrollbar appears correctly and the longest item is shown in full.

And the breadcrumb issue is still there, it's just a little better than before. the item flickering is not very frequent. As we have purchased your license, May you share the source codes(without minify) with us? then I can debug it.

Can you provide a sample that shows the issue with breadcrumb as much as possible close to the settings in your local project?

As for the source code, you don't have a license for it. You have purchased a Professional license, which doesn't include the source code.

your sample It doesn't work :'( https://stackblitz.com/edit/integralui-treeview-overview-z3m18u

[Lidor-Systems]

What do you mean?

Why in your screenshot the text appears in different font?

[Lidor-Systems]

We don't know why there is a difference at the same sample on your and our side. From the screenshot we can only see difference in the Font.

We tried this on Chrome and FireFox, but it works on our side.

[mm-ryo]

We don't know why there is a difference at the same sample on your and our side. From the screenshot we can only see difference in the Font.

We tried this on Chrome and FireFox, but it works on our side.

I am using the 'Microsoft Yahei', it may cause by screen resolution? for the calculation of the div width, it may include font size or screen resolution? just guess, I don't know it.

[Lidor-Systems]

These are default Windows 10 settings, they shouldn't matter for this issue.

for the calculation of the div width, it may include font size or screen resolution

We are getting the width from the HTML element offsetWidth. So when resolution or font size changes, the element width is also updated, resulting in recalculation of item width, which at the end should work with correct display of horizontal scrollbar.

We have tried to reproduce the issue on other computers with Windows 7 and Windows 10, changing font sizes and testing on Microsoft Edge, Chrome and FireFox, but it seems Ok.

Can you try the sample from some other PC, to see whether it will work?

[mm-ryo]

These are default Windows 10 settings, they shouldn't matter for this issue.

for the calculation of the div width, it may include font size or screen resolution

We are getting the width from the HTML element offsetWidth. So when resolution or font size changes, the element width is also updated, resulting in recalculation of item width, which at the end should work with correct display of horizontal scrollbar.

We have tried to reproduce the issue on other computers with Windows 7 and Windows 10, changing font sizes and testing on Microsoft Edge, Chrome and FireFox, but it seems Ok.

Can you try the sample from some other PC, to see whether it will work?

I am using Chrome, if I change the Font to Arial then it works but .....

I just found a small issue about the select item rendering.

[Lidor-Systems]

Thank you for the information. We have located the bug and it is now fixed.

An update will be available in Monday next week.

[mm-ryo]

Thank you for the information. We have located the bug and it is now fixed.

An update will be available in Monday next week.

Hi, I just tested in the version of 19.4.347. the issue is still there. and the toolbar flickering behavior is so bad on the selected/hovered item. I can see it flicker more than 2 times.

[mm-ryo]

How come the breadcrumb flickering issue comes out again?

[Lidor-Systems]

In 19.4.347 the problem with selected item rendering is solved. When a horizontal scrollbar appears, the width of the selected item above is updated, showing in full the item selection.

If you are referring to the issue with the 'Microsoft Yahei' font when set as system font under Windows 10, this remains. The testing is not yet done on this matter. This issue is strange (happens only with specific fonts), we were not able to recreate it so far. Try to solve it by increasing the padding-right of the template div element to 20px or similar.

The breadcrumb problem is now fixed, see our recent post here: https://github.com/lidorsystems/integralui-web/issues/14

[Lidor-Systems]

We notice the flickering problem with selected items or selected/hover toolbar. We notice it happens during expand/collapse. We are not sure yet why this happens.

This problem appeared when items have display mode set to Partial combined with hover/select template. The flickering doesn't happen when there are no toolbars.

We are working on a solution.

[Lidor-Systems]

On the other hand if you are referring to the flickering happening because of animations in hover/select items, this is due to the Office theme. You can remove this kind of animations from CSS:

.iui-treeitem-hovered, .iui-treeitem-content-hovered {
    background-color: #d9edfd;
    border: 2px solid #d9edfd;

    animation-name: none;
}
.iui-treeitem-selected, .iui-treeitem-content-selected {
    background-color: #a5d3fa;
    border: 2px solid #a5d3fa;
    color: #000000;

    animation-name: none;
}

By setting the animation-name attribute to none, the hovering and selection of items will no longer animate. You still have to set the desired colors for both states.

[Lidor-Systems]

The flickering for hover/select toolbar may still happen in your case if you are calling the updateLayout method within the afterExpand event handler. When layout gets updated, the current view is recreated in whole.

If updateLayout method is not required, you can replace it with:

• updateView - updates the component without recreating the layout in full
• refresh - updates the component appearance only (styles, classes in use, etc)

[mm-ryo]

In 19.4.347 the problem with selected item rendering is solved. When a horizontal scrollbar appears, the width of the selected item above is updated, showing in full the item selection.

If you are referring to the issue with the 'Microsoft Yahei' font when set as system font under Windows 10, this remains. The testing is not yet done on this matter. This issue is strange (happens only with specific fonts), we were not able to recreate it so far. Try to solve it by increasing the padding-right of the template div element to 20px or similar.

The breadcrumb problem is now fixed, see our recent post here: #14

The font I have changed to 'Arial'.

[Lidor-Systems]

and the toolbar flickering behavior is so bad on the selected/hovered item. I can see it flicker more than 2 times.

We have found what causes the toolbar flickering, we are working on the fix. This will work, regardless of a call to updateLayout method within the afterExpand event handler.

Expect to receive another update in next couple of days. This update will also include improvements of the Breadcrumb component.

[mm-ryo]

and the toolbar flickering behavior is so bad on the selected/hovered item. I can see it flicker more than 2 times.

We have found what causes the toolbar flickering, we are working on the fix. This will work, regardless of a call to updateLayout method within the afterExpand event handler.

Expect to receive another update in next couple of days. This update will also include improvements of the Breadcrumb component.

Thanks. Don't be in hurry. It's not very urgent.

[Lidor-Systems]

The new update v19.4.368 is now ready! We have sent an e-mail to your company representative.

[mm-ryo]

The new update v19.4.368 is now ready! We have sent an e-mail to your company representative.

Noted with thanks. let me download and test it then let you know the status.