I am using Primeng v11.x in my Angular 11 application. For some reason the option items are not highlighting when i used keyboard arrows to select an option item from the dropdown list
<p-dropdown
#dropdown
[options]="options"
optionLabel="name"
dropdownIcon="fas fa-caret-down"
[(ngModel)]="value"
(onChange)="onValueChange()"
[placeholder]="placeholderText"
[disabled]="disabled || readonly"
[autoDisplayFirst]="config?.autoDisplayFirst"
[resetFilterOnHide]="true"
(onFocus)="onFocusHandler()"
>
<ng-template let-option pTemplate="item">
<span class="truncate-option-text">{{ option?.name }}</span>
</ng-template>
</p-dropdown>
Can anyone point me what am i doing wrong here and why it is not highlighting as it is shown in primeng documentation? https://www.primefaces.org/primeng-v11-lts/#/dropdown
Related
I'm building a reusable component that will take sensitive data and include a toggle to show/hide that data. Hidden data is replaced with a PrimeNG skeleton. The problem I'm trying to solve is that if the <ng-content> is empty, I'd rather just show a - than the skeleton to prevent having to toggle it, just to find no data.
<ng-container *ngIf="dataIsMasked; then maskData else showData"></ng-container>
<ng-template #maskData>
<span class="skeleton-container">
<p-skeleton></p-skeleton>
</span>
<span class="no-data-placeholder"> - </span>
</ng-template>
<ng-template #showData>
<span class="data-mask-container">
<ng-content></ng-content>
</span>
</ng-template>
..code to toggle button & component variable...
I'm attempting to use some CSS selectors to determine if the content is empty or not, but on instances where the .data-container is empty, the styles aren't applied to .skeleton-container:
.data-container:empty + .skeleton-container {
display: none;
}
I'm using angular calendar, and I want to customize the events style,for example- to change their shape to square instead of circle.
I tried this code:
<mwl-calendar-month-view [eventTitleTemplate]="customEventsStyle" [locale]="locale" [viewDate]="viewDate" [events]="events" (dayClicked)="dayClicked($event.day)" (eventClicked)="eventClick($event)">
{{ viewDate | calendarDate:(view + 'ViewTitle'):'Es' }}
</mwl-calendar-month-view>
<ng-template #customEventsStyle let-event="event">
<div class="cal-events">
<p style="background-color: brown;">{{event.title}}</p>
</div>
</ng-template>
But it didn't change anything in the style.
I also tried to change the css file in this path:
"../node_modules/angular-calendar/css/angular-calendar.css"
I changed the style of the .cal-month-view .cal-event class, but nothing happend.
I'm new for this issue, I'll be thankful if you could help me.
Thank you
I found it out!
I just added this code into the custom template instead of the div:
<ng-template #customCellTemplate let-day="day">
<mat-list *ngFor="let e of day.events">
<button class="customEvent" (click)="eventClick(e)">
{{e.title}}
</button>
</mat-list>
</ng-template>
<mwl-calendar-month-view [cellTemplate]="customCellTemplate"> ect...
Thanks
I am running angular app, I have autocomplete when I hover over the autocomplete mat-options, I want to see entire customer number and name. I tried to do this
<mat-form-field [style.cursor]="pointer" [style.cursor]="pointer" [style.width.px]=300 >
<input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-icon matSuffix>keyboard_arrow_down</mat-icon>
<p id="spandiv">{{customerName}}</p>
<mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
{{customer.AccountID}} ({{customer.AccountName}}) <p id="spandiv1">{{customer.AccountID}} ({{customer.AccountName}})</p>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Basically I want to see value when I hover on the mat-option
One easy way to do this is to put the option text inside a div element with a small max-width. Then style that div element so overflows are normally hidden, but not when the option text is being hovered.
Example: https://stackblitz.com/edit/angular-vzfpjy
One problem with this solution is that the user has to hover over the text of the option to show the full value.
The Semantic UI dropdown menu works well by adding (http://jsfiddle.net/VL2Zq/22/):
$('.ui.dropdown')
.dropdown()
;
However, the dropdown menu cannot be displayed if I add the class active: http://jsfiddle.net/VL2Zq/21/
<div class="ui dropdown item active">
For now, I suggest to use select box with the value selected, and convert it to semantic UI dropdown list. This however isn't the best and most flexible approach.
<h2>Official Search Selection Dropdown Select Tag</h2>
<select name="country" class="ui search selection dropdown">
<option value="">State</option>
<option>Alabama</option>
<option>Alaska</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option selected>Wyoming</option>
</select>
http://jsfiddle.net/VL2Zq/23/
Edit:
Found that Semantic UI already has a method to handle this.
$('.dropdown').dropdown();
var selectedValue = "Female";
$('.dropdown').dropdown('set selected', selectedValue);
http://jsfiddle.net/ap3kfftw/1/
I'm using http://angular-ui.github.io/bootstrap/ accordion and popover inside accordion.
But Popover and accordion creates overlay and popover block displays only inside accordion.
Html code:
<accordion>
<accordion-group is-open="element.hide" is-disabled="lock">
<accordion-heading>
<i class="icon-chevron-right" ng-hide="element.hide"></i>
<i class="icon-chevron-down" ng-show="element.hide"></i>
<i ng-show="element.description" popover="{{element.description}}" popover-trigger="mouseenter" class="icon-info-sign"></i>
</accordion-heading>
//inner eccordion HTML
</accordion-group>
</accordion>
It would be better if you can provide a plunkr. But i feel like "popover-append-to-body" might solve your problem.
<i ng-show="element.description" popover="{{element.description}}" popover-trigger="mouseenter" popover-append-to-body="true" class="icon-info-sign"></i>