i am using primeng v11.x and using p-tree to display hierarchy values. As the list is quite big, i want to fix a height. i am using following but the scroll bar not appearing in the p-tree.
<div class="tree-component">
<div>
<p-tree
#tree
[value]="nodes"
selectionMode="checkbox"
[propagateSelectionUp]="true"
[propagateSelectionDown]="true"
(onNodeUnselect)="onNodeUnselect()"
(onNodeSelect)="onNodeSelect()"
disabled="disabled || readonly"
scrollHeight="200px"
[virtualScroll]="true"
></p-tree>
</div>
</div>
Related
Am using manage display to display nodes
The divs show no default classes as in the case below
<div>
<div>Pricing</div>
<div content="25000">25,000</div>
</div>
How do I resolve this?
I have not tried anything yet.
Consider a container, which contains an icon as well as a label next to the icon. The container has a flex-Layout, which means its width is adjusted to the width of its content. I am only displaying the label if a boolean variable "showLabel" is set in my ts-component. This is simply done by adding *ngIf="showLabel" to the label inside my HTML file:
<div class="container">
<i class="material-icons">{{ iconName }}<i>
<label *ngIf="showLabel">{{ label }}</label>
</div>
I can toggle the "showLabel" variable upon clicking a button. In this case, the width of the container shrinks, since the label disappears. I would like to animate this process, while at the same time not specifying any hard coded width. Is there a way to achieve this?
I'm using React and gotten the above with
<Nav bsStyle="tabs">
<NavItem active>Nav Item 1</NavItem>
<NavItem>Nav Item 2</NavItem>
{this.renderAdvancedSettingsButton()}
</Nav>
But this gives a warning about unknown props as Button is not meant to be nested inside Nav.
What's the proper way to do this? If i set Nav's css to float:left, the thin line will end at the last NavItem instead of the entire width, and other components apart from the button will move to the right of the Nav bar.
I am using angularjs material tabs https://material.angularjs.org/latest/demo/tabs .
Firstly, how to set the color for the left and right arrows?
<md-toolbar >
<div class="md-toolbar-tools tb">
<md-tabs class="tab">
<md-tab ng-repeat = "item in toDoList track by $index" label="{{item.name}}" >
</md-tab>
</md-tabs>
</div>
</md-toolbar>
For example, set the color of the arrows from white to other colors(like red) in the image and fiddle below
jsfiddle 1
Next, how to make the arrows always visible? In the image and jsfiddle below, if there is no tab overflow, the left and right arrows will not appear.
jsfiddle 2
Lastly, is there any formal/specific name for the left and right arrows, like pagination arrow? Because I can't find much related topic about the md-tabs arrow, maybe I used the incorrect keyword for the arrow.
For arrows color you can use this rule :
md-toolbar:not(.md-menu-toolbar) md-icon{
fill:red;
}
jsfiddle 1
But to make them always visible, I don't think it's possible unless you modify the Angular Material source code
I don't think that's the normal behavior or React Slick, but when initialize my page (via address bar), the carousel looks like that :
As you can see, there's a brown bar at right side of the screen.
But when I resize my browser window, it displays well.
Is there any way to prevent that when rendering the component?
I figured out what caused this behavior on my component, I was defining the height of the slide this way :
const heightCarousel = '80vh'
<Slider {...settings}>
<div style={{height:heightCarousel, background:'#F4CC67', padding:'15px 0', textAlign:'center'}}><h3>1</h3></div>
<div style={{height:heightCarousel, background:'#AA8326', padding:'15px 0', textAlign:'center'}}><h3>2</h3></div>
</Slider>
Instead of below, which lets React-slick defining the width automatically of each slide :
<Slider {...settings}>
<div style={{background:'#F4CC67', textAlign:'center'}}><div><h2>TEST</h2></div></div>
<div style={{background:'#AA8326', textAlign:'center'}}><h3>2</h3></div>
</Slider>
Note that you cannot define height inside a slide or you will get the same issue, but you still can play with padding to style your content inside.