I am running angular app , I have auto complete on this, I want to add horizontal scroll to the mat-option, I tried applying css style
.cdk-overlay-pane {
overflow-x: auto;
}
then applying syle as told in this docuemnt [enter link description here][1] showPanel: boolean
<mat-option class="CustomerDropDown" showPanel="true" ...
extended question
<mat-form-field >
<input matInput [matAutocomplete]="auto" [formControl]="customerFilterControl">
<mat-autocomplete panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn" style="width:750px;">
<mat-option *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID + '('+ customer.AccountName + ')'" (click)="onCustomerChange(customer)">
{{customer.AccountID}} ({{customer.AccountName}})
</mat-option>
</mat-autocomplete>
</mat-form-field>
Both the attempts failed!!
Try the following CSS. It worked for me.
::ng-deep .custom-mat-option .mat-option-text {
overflow: auto;
text-overflow: unset;
// color: green;
}
custom-mat-option is a class I have added to the <mat-option> element to increase the css specifity.
Stackblitz
HTML
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
TS File
import {ChangeDetectionStrategy, Component} from '#angular/core';
/** #title Basic virtual scroll */
#Component({
selector: 'cdk-virtual-scroll-overview-example',
styleUrls: ['cdk-virtual-scroll-overview-example.css'],
templateUrl: 'cdk-virtual-scroll-overview-example.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}
CSS
.example-viewport {
height: 200px;
width: 200px;
border: 1px solid black;
}
.example-item {
height: 50px;
}
and also follow this link
scrolling
Related
I am using react-phone-input-2 library in my code-base. This component is used in conjuction with react-hook-forms and yup for field validation. Using their material.css file for styling and adding some custom CSS I have been able to modify its default look. For custom CSS I am using .css file like so:
phone-input.css
.react-tel-input .special-label {
background-color: transparent !important;
color: #009378 !important;
position: absolute;
top: 6px !important;
font-size: 12px !important;
left: 10px !important;
}
When the field validation fails, I have to toggle color of this ".special-label" classes color. I am not sure how to do that. I could not find an API which they expose for this special-label classes style. Github repo of phone-input.
Here is my phone-input code:
import React from 'react';
import PhoneInput from 'react-phone-input-2';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faPhone } from '#fortawesome/free-solid-svg-icons';
import { Controller } from 'react-hook-form';
import FormIcon from './FormIcon';
import 'react-phone-input-2/lib/material.css';
import './phone-input.css';
export default function FormPhoneInput({ error, validation }) {
return (
<div className={`relative inline-block ${error ? 'pb-4' : ''}`}>
<Controller
name="phone"
render={({ field }) => (
<PhoneInput
country="in"
placeholder="Phone"
name="phone"
countryCodeEditable={false}
defaultErrorMessage={error}
isValid={() => {
return error ? false : true;
}}
inputProps={{
required: true,
}}
inputStyle={{
width: '100%',
color: '#F2FBF7',
...(error
? { background: '#4D3230' }
: { background: '#004246' }),
border: 'none',
outline: 'none',
}}
{...field}
/>
)}
></Controller>
<FormIcon
icon={<FontAwesomeIcon icon={faPhone} />}
error={error}
validated={validation}
/>
</div>
);
}
Rendered DOM look like this: (react-tel-input wraps the whole component and special label is a child div)
Current UI looks like this, when validation is failed:
I have a form that contains something like the following:
<div class="form-field">
<input-component [tabIndex]="tabData.tabEnable"></input-component>
</div>
<div class="form-field">
<input [tabIndex]="tabData.tabEnable" matInput cgiPrecision type="number"/>
</div>
In the css I have this:
input:focus {
border: $border-width solid $darkblue
}
but the border only shows on the input element and not the input-component component which has an input wrapped inside of it. How can I get the input:focus to work for the custom angular component as well?
Your custom component should listen for the focus event, then focus the input.
#Component({
selector: 'custom-input',
template: `<input #myInput type="text" [(ngModel)]="innerValue">`,
styles: [`
input {border: 5px solid green; }
input:focus { border: 5px solid blue; }
`]
})
export class CustomInputComponent implements ControlValueAccessor {
#ViewChild('myInput', {static: false}) inputCtrl;
//...functions to implement ControlValueAccessor
#HostListener('focus')
focusHandler() {
this.inputCtrl.nativeElement.focus();
}
}
Here's a stackblitz demonstrating.
scss files are limited to their angular component. If you want to use css globally, use the style.scss.
Another option is, integrate the scss into your child component with the style-urls array:
#Component({
selector: 'input-component',
templateUrl: '/input-component.html',
styleUrls: [
'./input-component.scss', // own scss file
'./../path-to-other-compontent.scss' // <--- here
]
})
export class InputComponent {
[...]
}
I added an onClick function to the Card so you can go to the item detail view and read more and see more images. The onClick makes the text blue and gives it an underline. I overrode the blue text, but I cannot seem to remove the blue line when I hover.
Component:
import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle } from 'reactstrap';
import './ItemCard.css';
class ItemCard extends Component {
render() {
return (
<div>
<Card className="text-center item-card" onClick={this.props.clicked} >
<CardImg top width="100%" src={this.props.image} alt="Card image cap" />
<CardBody className="item-card-body">
<CardTitle>{this.props.title}</CardTitle>
<CardSubtitle>${this.props.price}</CardSubtitle>
<CardText>{this.props.description}</CardText>
</CardBody>
</Card>
</div>
);
}
}
export default withRouter(ItemCard);
Component CSS:
.item-card {
max-width: 20em;
flex: 1;
color: black;
}
.item-card :hover {
color: black;
text-decoration: none !important;
}
text-decoration no inheritable property and you need to set it to child elements directly:
.item-card {
max-width: 20em;
flex: 1;
color: black;
}
.item-card *:hover {
color: black;
text-decoration: none !important;
}
https://material.angular.io/components/select/overview
the select dropdown renders totally outside app-root.
Basically it creats a div with class="cdk-overlay-container" which is appended as sibling of the app. I want the drop down to open at exactly where I embed <mat-select> tag. What am I missing.
Here is my code
import { Component, Input, Output, OnInit, OnChanges, SimpleChanges, ChangeDetectionStrategy, EventEmitter } from '#angular/core';
import {FormControl} from '#angular/forms';
#Component({
selector: 'my-app',
template: `
<nav class="row navbar navbar-default navbar-fixed-top">
<div class="navbar-container">
<div class="navbar__content">
<mat-form-field>
<mat-select [formControl]="pc" panelClass="example-panel-{{pc.value}}">
<mat-option *ngFor="let panelColor of panelColors" [value]="panelColor.value">
{{ panelColor.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</nav>
<div class="main-page">
NAVBAR ENDED MAIN PAGE STARTS
</div>
`,
styleUrls: [ './app.component.scss' ],
changeDetection: ChangeDetectionStrategy.Default
})
export class AppComponent {
private pc = new FormControl('red');
private panelColors = [
{value: 'red', viewValue: 'red'},
{value: 'blue', viewValue: 'blue'},
{value: 'green', viewValue: 'green'}
];
}
I created a stackblitz here
That's because you're missing a theme.
Add the following line to the top of your styles.scss or declare a theme (read the guide for more info):
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
This can help you find the right path :
In the app.component.html, add a class to select <mat-form-field> tag :
<mat-form-field class="myForm">
At the bottom of app.component.scss
/*.navbar-default{
height: 120px;
}*/
.myForm {
height: 100px;
}
#cdk-overlay-2 > div {
margin-top: 80px;
}
.page-content {
margin-top: 100px;
}
.main-page{
height: 130px;
}
You have to import #import "~#angular/cdk/overlay-prebuilt.css"; in styles.scss.
Following is my working code, which is not giving any error in console and printing the array items and test heading as expected. BUT somehow dynamic background styling in not working, Let me know what I am doing wrong here.
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<h1>{{name}}</h1>
<div class="one" *ngFor="let item of colArr" style="background: {{item}};">{{item}}</div>
`,
styles: [`
.one {
width: 100%;
text-align: center;
padding: 10px;
margin: 5px;
}
`]
})
export class HomeComponent {
public name = 'test';
public colArr = ['#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'];
}
Following is the output I am getting -
Direct binding to style is discouraged (doesn't work well on all browsers). Use instead
<div class="one" *ngFor="let item of colArr" [ngStyle]="{background: item}">{{item}}</div>
or
<div class="one" *ngFor="let item of colArr" [style.background]="item">{{item}}</div>