Ways to incorporate horizontal scrolling in mat autocomplete

I have an Angular app with auto complete functionality. I am trying to add horizontal scroll to the mat-option by applying CSS styles, but it's not working as expected.

.cdk-overlay-pane {
  overflow-x: auto;
}
  
  I also tried following the instructions mentioned in this document [link][1] for 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 attempts to add horizontal scroll to the mat-option failed.

cssangulartypescriptmat-autocomplete

Answer №1

Check out this CSS solution that worked well for me.

::ng-deep .custom-mat-option .mat-option-text {
  overflow: auto;
  text-overflow: unset;
  // color: green;
}

custom-mat-option is a custom class I included in the <mat-option> tag to enhance the specificity of the CSS.

Visit Stackblitz

Answer №2

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;
}

Additionally, feel free to explore more on the subject by visiting this link about scrolling in Angular Material.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When hovering over a thumbnail, create a transition effect on both the thumbnail itself and the associated H

I've been struggling with this problem for a few days now. My goal is to achieve a similar effect to what is on this website: I want to highlight a link when the mouse hovers over a thumbnail, with a transition effect. I think it has something to do ...

jqueryhtmlcsscss-transitions

Issue with modal-embedded React text input not functioning properly

I have designed a custom modal that displays a child element function MyModal({ children, setShow, }: { children: JSX.Element; setShow: (data: boolean) => void; }) { return ( <div className="absolute top-0 w-full h-screen fle ...

javascriptreactjstypescriptnext.js

Create a page that expands to full height with the ability to scroll

I am trying to achieve a layout using flex that fills the entire height of the screen. https://i.sstatic.net/s1RA5.png My goal is to have a red background that scrolls based on the content inside. If there is more content, I want it to maintain the same ...

cssflexbox

Javascript animations failing to run sequentially

I am working on a circular design made up of 12 arc segments and would like to create a smooth transition from the start pattern to the end pattern for the user to view. There will be multiple start and end patterns to showcase. Check out my current code ...

javascriptjqueryhtmlcss

Steps for creating a TypeScript class that can implement an interface

As a beginner in TypeScript, I am looking for help with the following code snippet: async function sleep(ms: number) { return new Promise((resolve, reject) => { setTimeout(() => resolve(), ms) }) } async function randomDelay() { ...

javascripttypescriptinterface

The page numbers on the GridView are displayed in distant columns, appearing far apart from

My gridview is displaying page numbers in separate columns instead of together in the center. How can I bring the page numbers together in the center? <asp:GridView ID="GridView1" runat="server" Width="100%" OnRowCommand="GridView1_RowCommand" CssClas ...

cssasp.netgridviewpagination

Progress Bars Installation

For more detailed information, visit: https://github.com/rstacruz/nprogress After linking the provided .js and .css files to my main html file, I am instructed to "Simply call start() and done() to control the progress bar." NProgress.start(); NProgress. ...

javascriptcssprogress-bar

Using @Input to pass data from a parent component to a

Looking to modularize the form code into a separate component for reusability? Consider using @Input and referencing it in the HTML to pass values to the post method. Here's how you can achieve this: Previously, everything worked smoothly when all th ...

htmlangulartypescriptformspost

Troubleshooting Bootstrap 4: hidden-md-up inconsistency

I'm trying to hide these menu bars with the class hidden-md-up, but it's not working. I'm using CDN but i've also tried the files and checked the class...can anyone help? Here's what I have <div class="col hidden-md-up"> ...

htmlcsstwitter-bootstrapbootstrap-4

Passing data from getServerSideProps to an external component in Next.js using typescript

In my Index.js page, I am using serverSideProps to fetch consumptions data from a mock JSON file and pass it to a component that utilizes DataGrid to display and allow users to modify the values. export const getServerSideProps: GetServerSideProps = async ...

javascriptreactjstypescriptnext.jsmaterial-ui

Issue in Angular Material: The export 'MaterialComponents' could not be located in './material/material.module'

I'm relatively new to Angular and I am encountering some difficulties when trying to export a material module. The error message that appears is as follows: (Failed to compile.) ./src/app/app.module.ts 17:12-30 "export 'MaterialComponents&ap ...

javascriptangulartypescriptangular-material

Ensure that the TextBox field extends to the edges of the parent div, with full cross-browser compatibility

In the following code snippet, there is a challenge in ensuring that the TextBox field properly fits within the Width and Height of the div#chat-message. This seems to work well in Chrome but encounters issues in IE8 or Mozilla. Additionally, in Mozilla, t ...

asp.nethtmlcsscross-browser

How to instantiate an object in Angular 4 without any parameters

Currently, I am still getting the hang of Angular 4 Framework. I encountered a problem in creating an object within a component and initializing it as a new instance of a class. Despite importing the class into the component.ts file, I keep receiving an er ...

angulartypescriptwebpack

The inclusion of Bootstrap 4 in the header seems to be causing issues with mouse events not functioning correctly

Exploring the functionalities of Bootstrap 4 and jQuery has been an interesting journey. I recently worked on creating a Navbar with 4 links, where the 4th link has a submenu that opens upon hover. However, I encountered an issue where this functionality o ...

javascripthtmlcssbootstrap-4

Having Issues with CDK Virtual Scrolling in Angular Material Table

Dealing with an angular material table that contains millions of records can be quite challenging. I have implemented pagination with various options such as 10, 25, 50, 100, 500, and 1000 items per page. However, when selecting the option for 1000 or all ...

angulartypescriptangular-materialpaginationangular-cdk-virtual-scroll

I've attempted various methods but the header stubbornly refuses to change its color

Looking for help with my website I'm working on changing the header menu color on my site. I managed to change the colors of the menu items themselves using code provided by someone here, which was great. However, I'm struggling to change the de ...

csswordpressmenucolorsheader

Issue with Angular2 not able to call POST method in CodeIgniter RESTful API resulting in 404 error

I am encountering an issue with my codeigniter restful API. While the GET method is working fine, I am unable to get the POST method to work from Angular2. this.api.post('quality/addeditquality', this.formdata).subscribe(data => { c ...

phpangularcodeigniterangular2-services

Having difficulty aligning the button in the center

I encountered an issue trying to center a button, I attempted to use text-align: center, but it didn't have the desired effect. .regis-btn { border-radius: 0px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o ...

htmlcss

Why am I encountering issues accessing a child property in TypeScript?

Here is some TypeScript code that I am working with: export interface SelectQuery_thing { __typename: "ThingQueryPayload"; content: (SelectQuery_thing_content | null)[]; pageInfo: SelectQuery_thing_pageInfo; } export interface SelectQuery_thing_con ...

arraystypescript

Angular 2 will execute the forkJoin again 5 seconds after it finishes

After completing my forkJoin method and receiving the result, I want to trigger it again every 5 seconds; This is the current implementation of my forkJoin: let getResult1 = this.myService.GetResult1(param1, param2); // return Observable<Resul ...

angularexpand