I have an Angular 13.1.0 project with PrimeNG 13.0.2
I'm trying to use the Tree component to paint a tree with parents and childs, my problem is with the "expandedIcon" and "collapsedIcon" property.
The component simply ignore this values, and always painting the parent expandable node with the default icon "pi-chevron-right". Apart from this, the icon is showing always as a blank square.
My problem with the square icon will be solved if the node shows a Fontawesome icon, that i define on the "expandedIcon" and "collapsedIcon" property, but prime faces always try to use the default icon.
This is my parent node:
{
"label": "Page Info",
"type": "PAGE_NODE",
"expandedIcon": "fas fa-chevron-up",
"collapsedIcon": "fas fa-chevron-down"
}
And PrimeNG draw it like this:
Update:
I have see the source code of PrimeNG, and the icon is on the code, without any option to change it:
https://github.com/primefaces/primeng/blob/13.0.4/src/app/components/tree/tree.ts
<button type="button" [attr.aria-label]="tree.togglerAriaLabel" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1">
<span class="p-tree-toggler-icon pi pi-fw" [ngClass]="{'pi-chevron-right':!node.expanded,'pi-chevron-down':node.expanded}"></span>
</button>
Related
I'm using material-ui as my css framework and I want to select button that contains a specific text.
My current code:
cy.get('button').contains('Edit Claim').should('be.disabled');
It fails because the button component of material ui outputs the text inside a div so cypress is asserting the disabled attr to the div. I want it to assert to the button.
Edit:
I solved it using cy.contains('button', 'Edit Claim').should('be.disabled');
On the Material-UI demo page the label is in a child <span> (not <div>),
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained Mui-disabled Mui-disabled" tabindex="-1" type="button" disabled="">
<span class="MuiButton-label">Disabled</span>
</button>
but there may be variations - in any case, you can reference the button by adding .parent() to the test
cy.visit('https://material-ui.com/components/buttons/');
cy.get('button')
.contains('Disabled') // span is the subject
.parent() // move up to the button
.should('be.disabled');
Is there a way to show the react-bootstrap modal inside a specific div and not the entire screen?
The code looks like this:
<div>
<textarea />
<Modal>....</Modal>
</div>
I want to show the modal on top of textarea. Any help?
PS Got the solution. Had to create a wrapper for modal and adjust styling.
I'm using antd TimePicker when I open it and scroll down, the popover scrolls with the page instead of staying in place.
I cant figure out why their official solution for the scrolling problem isn't working for me
https://ant.design/docs/react/faq#How-do-I-prevent-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scrolling-with-the-page
Here is my code:
<div className="timepicker__wrapper">
<span className="timepicker__mintime-label">
{getTranslate(QUESTION_MODULE.GENERAL.MINIMUM_TIME_LABEL)}
</span>
<TimePicker
getPopupContainer={triggerNode => triggerNode.parentNode}
onChange={onChangeMinTime}
format={timeFormat}
defaultValue={moment(item.minTime ?? '00:00', timeFormat)}
allowClear={false}
/>
</div>
If I console.log triggerNode.parentNode it points to the timepicker__wrapper exactly as it should.
Here you can see the anchor node
I solved this issue by adding position: relative to the anchor node. It would be nice to mention this in the docs
I am trying to implement segmented control button instead of normal radio button in Angular
Although If i remove CSS class, normal radio button is working fine and remain selected on navigating to another page os clicking anywhere on the same page, but after adding CSS, radio button selection do not remain intact and deselects.
Please help with this
HTML Code :
<div class ="segmented-control">
<div ng-repeat="p in LP">
<a href="#" class="list-group-item">
<label> {{p.label}}
<input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
</a>
</div>
</div>
CSS :
.segmented-control input[type="radio"] {
visibility:hidden;
}
.segmented-control .list-group-item {
display: inline-block;
}
In controller.js
calling below function to get the value of radio button
$scope.getElement= function(obj){
$scope.test = obj.target.value;
}
There are 2 issues with your code:
You have nested elements <div><a tag><label><radio></label> but the ng-model will be set only when you click exactly on the label. If you click little outside the label the ng-model will not be updated.
The gray color change that you see when you click on the segmented button does not mean that the radio button is selected. It is applying the following bootstrap class a.list-group-item:focus which means the button is in focus. That is why when you click outside the button the color changes back to white.
To solve this you have to add extra class to highlight the selected button and make sure your ng-model is updated no matter where the user clicks inside the div.
I have created a sample jsfiddle to demonstrate both the issues. Good luck and welcome to Stackoverflow!
I'm trying to get to grips with Polymer version 1.0 but what I thought would be simple example is turning out not to be so. After after several hours of experimenting, and reading Polymer documentation I've not clue as to were I'm going wrong.
What I was trying to do is convert the Collapsing toolbar example from robdobson on GitHub to something that would work under Polynmer 1.0.
Here is the body of my code from within my index.html file
<collapse-toolbar query="(max-width: 500px)">
<div class="logo">
<a href="#">
<iron-icon icon="polymer"></iron-icon>
</a>
</div>
<paper-menu>
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</collapse-toolbar>
Here is the code from my custom element (collapse-toolbar.html) file:
<dom-module id="collapse-toolbar">
<template>
<content select=".logo"></content>
<template is="dom-if" if="{{smallScreen}}">
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<content select="paper-menu"></content>
</paper-menu-button>
</template>
<template is="dom-if" if="{{!smallScreen}}">
<content select="paper-menu"></content>
</template>
<iron-media-query query="{{query}}" query-matches="{{smallScreen}}"></iron-media-query>
</template>
</dom-module>
<script>
Polymer({
is: 'collapse-toolbar',
properties: {
query: String
}
});
</script>
What I'm seeing when I run this in a browser (Chrome) is the following:
If I open the index.html file with my browser window set to > 500px wide, what I see is the Polyer icon and the paper-menu, which is exactly what I expect.
If I reduce the width of the browser window to <500px, the paper-menu disappears and a hamburger menu appears along side the polymer icon. If I click on the hamburger menu, NO drop down menu appears.
If I now scale the window back to >500px, the hamburger menu disappears but my regular paper-menu does not come back.
If I load the page with the window at <500px to begin with, the hamburger menu appears, but does not operate and when I expand the window to > 500px the paper-menu also does NOT appear.
Hoping someone can put me on the right track.
Inside index.html, you should use <paper-menu class="dropdown-content"> to make the dropdown menu work.
I have still no idea how to replicate the functionality of the original collapse-toolbar in polymer 1.0.
UPDATE:
Use <template is="dom-if" if="{{!smallScreen}}" restamp="true"> to make the menu reappear after enlarging the window.