How can I create a blank icon to use as a spacing placeholder?
For example, I want to align the languages in this menu:
<v-list>
<v-list-item v-for="(item) in languages" :key="item.id" #click="() => { currentLanguage = item.id }">
<v-list-item-title>
<v-icon v-if="item.id === currentLanguage">mdi-check</v-icon>
{{ item.name }}
</v-list-item-title>
</v-list-item>
</v-list>
In the example, I want all the languages are that not the current language to be indented by exactly the width of the check icon, in effect I want a blank icon to push the text across by the correct amount.
You could leave the icon here and toggle a CSS property: visibility: none.
Otherwise, apply an exact margin left to your text.
Related
Input and Label:
Input, Icon and Label:
Icon and Label:
Label only:
There are no additional styles or margins applies to the input or label.
The container is flex with a gap set to 12px.
Where does that extra space come from when it's only the input and the label?
PS:
I am using Stencil.js.
The icon is a separate stand-alone component nested between the input and label, which are html elements. The icon is conditionally shown depending on whether or not an icon name is passed to the component.
This is what my code looks like:
return (
<a href="javascript:;" class={`dropdown-item ${this.checkboxColor}`}>
{this.checkable && <input type="checkbox" id="checkbox4" class={`form-check-input`} />}
<ifx-icon icon={this.icon}></ifx-icon>
<label htmlFor="checkbox4" class="form-check-label"><slot /></label>
</a>
)
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
I want the cursor to be a progress when the image inside the card has not loaded. And change the cursor to pointer when the image inside the card has fully loaded. I used style binding to achieve this. :style="{ cursor: imageLoaded[index] ? pointer : progress }". But the cursor always remains a pointer. This is my code:
<v-row>
<v-col v-for="(option, index ) in options" :key="index" cols="6">
<v-lazy :options="{ threshold: 0.5 }" min-height="130">
<v-hover v-slot:default="{ hover }">
<v-card
link
width="160"
id="options_card"
:class="[option.selected ? 'elevation-8 primary' : 'elevation-2']"
#click="OptionSelected( index, option )"
:style="{ cursor: imageLoaded[index] ? pointer : progress }"
>
<v-list-item>
<v-list-item-content>
<span id="option_title">{{ option.title }}</span>
</v-list-item-content>
</v-list-item>
<v-img
width="100%"
height="130"
:src="option.thumbnail"
id="thumbnail"
#load="imageLoaded[index]=true"
>
<template v-slot:placeholder>
<v-sheet color="grey lighten-4" class="px-3 pt-3 pb-6 fill-height">
<v-skeleton-loader type="image">
</v-skeleton-loader>
</v-sheet>
</template>
</v-img>
</v-card>
</v-hover>
</v-lazy>
</v-col>
</v-row>
data () {
return {
imageLoaded: []
}
}
Can anyone help?
Thanks.
I think it's not working because, the array is to reactive because to has zero elements in the beginning.
You have to populate the imageLoaded array with false and then change the item at the required index to true when image is loaded
something like.
data() {
return {
imageLoaded: [...options.map(op => false)]
};
}
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.
How can I change the font color on the text showing the selected value from an Angular 5 material mat-select when it is set to disabled. Currently it defaults to gray color and I want to change it so that it display darkblue for both disabled and enabled.
<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
<mat-option *ngFor="let prod of products" [value]="prod.productID">
{{ prod.key }}
</mat-option>
</mat-select>
</mat-form-field>
Found out how to change the font-color on disable mat-select element. The above ngClass does not work on the font color. It does work on the font size.
The Styling mat-select in angular-material link had the most of the answer except to override the disable font color, you will need to override the style .mat-select-value-text
e.g.
::ng-deep .mat-select-value-text {
color: rgba(0,0,0,.88);
}
You just need to use ngClass and pass appropriate conditions for styling the options.
I'm considering selected is number. If it's an FormControl then just change prod?.productID==selected.value}
<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
<mat-option *ngFor="let prod of products" [value]="prod.productID" [ngClass]="{'font-bold':prod?.productID==selected}>
{{ prod.key }}
</mat-option>
</mat-select>
In CSS of this component define a class Font-bold as this
.font-bold {
font-weight: bold
}
Use ngClass. You can pass an object with conditions and strings matching CSS classes. Something like this:
Take a look here https://angular.io/api/common/NgClass