Troubleshooting a CSS problem within mat-autocomplete component in Angular 7

While using mat-autocomplete, I noticed that when I select an option from the dropdown and then scroll through the main bar, the dropdown menu does not move along with the autocomplete input field. view image here

Here is the code snippet:

<td width = 24% *ngIf="!stock.value.status_item">
    <input style="width: 167px;" type="text" placeholder="Select Item"   #editInput  tabindex="1" class="form-control"
      matInput [matAutocomplete]="itemsAuto" [(ngModel)]="stock?.value.commodity_name" [ngModelOptions]="{standalone:true}"  [disabled]=" stock.value.confirm_status" (input)="onSearch(stock?.value.commodity_name)" >
    <mat-autocomplete  #itemsAuto="matAutocomplete"  (opened)="autocompleteScroll()">
      <mat-option *ngFor="let item of ingredients" [value]="item.name"  [disabled]="!isItemAvailable(item)" (click)="addStockManully(item,i)">
          {{item?.name}}
            <span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvO" *ngIf="!isItemAvailable(item)">
              </span>
              <span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvOs" *ngIf="isItemAvailable(item)">
                </span>
      </mat-option>
    </mat-autocomplete>
  </td>

cssangularjsangularmat-autocomplete

Answer №1

The action is not incorrect. Once the dropdown menu appears, whether it's for the mat-select or mat-autocomplete, its position will remain fixed.

One solution is to close the dropdown after selecting an option and then scroll the main bar.

Alternatively, you can close the dropdown when the input loses focus using the blur event. This way, the list in the dropdown will immediately be hidden when you perform another action.

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

Put the code inside a function. I'm new to this

My goal is to encapsulate this code: if($(window).width() > 980) { $(window).on("scroll", function() { if($(window).scrollTop() > 20) { //add black background $(".x-navbar").addClass("active"); $(".x-navbar .desktop ...

javascriptjqueryhtmlcssfunction

Creating divs dynamically in a loop and displaying them upon clicking a button in Angular

I am trying to dynamically create divs in a loop and show the selected div when I press a specific button. In theory, this is how I envision it... <div>div1</div><button (click)="showDiv(divID)">showDIV</button> To hide a ...

arraysangularangular-ng-if

The way an event can be outrun or vanish due to another event

let bar = new function(){ $scope.MessageSpan="Item added successfully";} When the Add button is clicked, the above function is invoked. However, if I want to hide this message when any other button is clicked, I would have to update the span text for all ...

javascriptangularjs

Angular 1.x just got a major upgrade with the introduction of the UI-Router v1.0+ $trans

I am on the hunt for a method that can replicate the functionality of UI-Router's $rootScope.$on('$stateChange...' from before version 1.0. Although I am aware of the new $transitions service, I am struggling to get it to work in the same wa ...

angularjsangular-ui-router

Animation using jQuery is functional on most browsers, however, it seems to

After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...

javascriptjqueryhtmlcsssafari

Sorting tables dynamically in AngularJS

I've created a dynamic table in Angular 1.6 that pulls data from a web API in JSON format. Here's a snippet of the data: { "CallData": [ { "TableHeaders": [ { "id": "0", "text": "Time" }, { ...

angularjs

Toggle the menu using jQuery on unordered list items

Below is the HTML code I am using : <ul class="main-block"> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 1</a> <ul class="dijete"> <li class="child"> <a href="some-sub-categ ...

javascriptjqueryhtmlcss

Using TypeScript, we can assign a JSON object to an extended class by leveraging the

Task was to include an additional property. I modified a current class by adding a new property, but when I assign a JSON object from the database, the newly added property disappears. Is there a way to correctly assign a JSON object to a TypeScript class ...

jsonangulartypescriptclass

What is the most effective way to use Javascript to update an image depending on the selected value in a dropdown

My JavaScript skills are limited, but I have successfully created a form with 4 drop-down selection boxes on the left side for users to choose from (State, Car, Year, Condition). After making their selections, users can click a 'calculate' butto ...

javascriptjqueryhtmlcss

What is the best way to change an array element into a string in TypeScript?

Within my Angular 2 component, I am utilizing an array named fieldlist which is populated by data retrieved from an http.get request. The array is declared as follows: fieldlist: string[] = []; I populate this array by iterating through the JSON response ...

arraysangulartypescript

Using Jquery to bind events for selecting focus in and out

There seems to be an issue with binding jQuery events to a select element. The desired behavior is for the .focus class to be added when the select is clicked. However, the logic breaks when an option is selected from the dropdown. See it in action here: ...

cssfocusjquery

Switch up the text when the image link is being hovered over

Is there a way to change the text color of the "a" tag when it is not wrapping the img link? <li> <a href="# WHEN I HOVER THIS IMG LINK I WANT A TAG BELOW TO CHANGE COLOR"> <img alt="Franchise 16" src="#"></img> < ...

javascriptjquerycss

Adding an element within an ngFor iteration loop

I'm currently working on a code snippet that displays items in a list format: <ul> <li *ngFor="#item of items">{{item}}</li> </ul> These items are fetched from an API through an HTTP call. Here's the code snippet for tha ...

javascriptangularangular2-directives

Tips on making a material-ui grid fill up the entire screen

Currently, I am working on developing a layout that resembles most editor/IDE setups using material-ui and react. In this layout, I have a top bar, a bottom bar, side panels on both sides, and a center area. My main concern is how to ensure that this grid ...

htmlcssreactjsmaterial-ui

Hover effects on the navigation bar combined with an image featuring a sub navigation menu

Looking to craft a dynamic navigation bar that switches out subcategory images on hover. (subcategories come pre-loaded with images) ...

jquerycsshtml

How to use image source and mouse hover effects in CSS3

Can we create a CSS3 class for the src, onmouseout, and onmousehover properties? <img src="http://www.example.com//images/pic.png" onmouseout="this.src = 'http://www.example.com/images/pic.png'" onmouseover="this.src = 'http://www.examp ...

htmlcssasp.net-mvc

Make the most of your Bootstrap 3 layout by utilizing a full page container that fills both the width and height between a fixed header and

I am currently working on a basic bootstrap page with the Example template from Bootstrap's website. I want the content in the middle to take up the space between the header and footer, while ensuring that both the header and footer remain visible at ...

javascriptjqueryhtmlcsstwitter-bootstrap

I am interested in creating a design where two DIVs are layered on top of each other with one having transparency, allowing visibility through to the background DIV. This can be achieved using a combination of

Looking to enhance the visual appeal of my website, I decided to incorporate a background image within a div. To add more depth and creativity, I am now striving to overlay a semi-transparent black box on top of the image. This overlay will not only allo ...

htmlcss

Manage image placement using CSS object-position

I have the following code snippet: img{ width: 100%; height: 1000px; object-fit: cover; object-position: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

javascripthtmlcssimageobject-position

Are you constantly encountering errors with JSONP when working in Angular?

Upon checking the web console, I noticed that the jsnop file is being loaded but I also receive an "ajax Failed" message. var loginuser = $http.jsonp( 'http://livegap.com/interior/users/login.php?callback=JSON_CALLBACK', { params :{username: "us ...

angularjsjsonp