Scroll bar not visible for smart components in angular

[santhosh]

When the height of the smart component cannot show all the items it has then it’s expected to add a scroll bar especially when the height of the component is set and not auto, the scroll bar is not visible and I cannot view the overflowing contents. But if the height of the any of parent elements or that component itself is modified manually or programmatically after the component loads then it’s showing the scroll bar.
Anyone else facing this issue? please help me I got stuck with this.

[santhosh]

Thought of providing more details. Below is the HTML code that using smart tree
<smart-tree
[filterable]=”true”
filterInputPlaceholder=”Search Categories”
#tree
>
<smart-tree-item
*ngFor=”let category of treeDataSource”
(click)=”selectCategory(category.label)”
[ngClass]=”{ selected: categorySelected === category.label }”
>
{{ category.label }}
</smart-tree-item>
</smart-tree>
 
CSS Style
smart-tree {
height: 100%;
width: 100%;
}
When I load the page, there is no scroll bar shown. but there are a lot of items that were hidden
After I change the height of the parent element and reverted to the original height, the scroll bar is visible

[yavordashew]

Hi santhosh,
Testing with the information that you provided I was unable to reproduce the issue as you do.
As far as I can comprehend from the shared info you have the smart-tree component in parent component and if the parent has a set height and the smart-tree component has overflowing items the scrollbar is visible.
I have a little code example:

<div class="tree-container">
   <smart-tree #tree id="tree" [scrollMode]="'scrollbar'" [selectionMode]="'oneOrMany'" [showLines]="true"></smart-tree>
</div>

And in the CSS:

.tree-container{
  height: 200px;
}
smart-tree {
	width: 100%;
	height: 100%;
}

Let me know if that works for you but if this is not the case it will be better to share a bit more context of your situation!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts