Resizing the md-dialog-container in angular-material2 can be achieved by adjusting the size based on the dropdown component present in the

Currently, I am utilizing Angular Material2's dialog component. Within the dialog, I have incorporated input fields and angular2-dropdown-multiselect.

The issue arises when I open the dropdown, as it automatically adds a scrollbar to the dialog box.

https://i.sstatic.net/Aee9y.png

I am aiming for the dialog to resize itself dynamically instead of displaying a scroll bar when opening the multi-select dropdown.

Despite attempting to assign a max-height property to the dialog box, I have been unsuccessful in resolving this problem :(

htmlcssangularangular-material2mddialog

Answer №1

To implement a click event on your search element, follow these steps:

<div class="form-group" (click)="autoScroll($event)">
    <ss-multiselect-dropdown></ss-multiselect-dropdown>
</div>

In your controller file:

autoScroll(event): void {
  let parent = document.getElementById("ng2Dialog");
  parent.scroll(0, event.target.getBoundingClientRect().top);
}

If you are using Angular Material2's dialog, make sure to adjust the 'parent' accordingly.

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

Provide alternative styling through css in instances where the Google Books API does not provide an image

How can I modify the CSS code to display the author and title of a book when there is no image available from the Google Books API? Currently, users see a custom image linked here, but it's not clear what it represents without the name and author inf ...

javascripthtmlcss

Can a Chrome extension display a webpage in a separate window using only JS, HTML, and CSS?

I am currently working on creating a custom Google Chrome extension. My goal is to have a small window appear when the user clicks on the extension button, without using window.open or traditional pop-ups, to display a specific web page. I have a basic un ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Utilizing a combination of HTML, AJAX, and PHP, transfer an HTML input array via AJAX to a PHP webpage

Despite trying numerous similar solutions, none of them have proven effective for my issue. Within a form, users can input an unspecified amount of select options that can be added as needed using AJAX. My goal is to post this array to a PHP page via AJAX ...

javascriptphpjqueryhtmlajax

Adjust the image's width to match the width of the browser

I am seeking assistance on how to resize an image to fit the width of the browser. Specifically, the image I want to resize is my header image and I want it to span the entire screen width. Additionally, I need to overlay a div on top of the image. Curren ...

htmlcss

Is there a way to replicate this exact toggle selection functionality from Angular Material using just HTML and CSS?

I'm attempting to incorporate this functionality into my Angular project ( link ), but I'm facing challenges with styling it using CSS. Could this be due to limitations in overriding the default settings? I came across this helpful resource: sour ...

htmlcssangularangular-materialnssegmentedcontrol

What is the best way to send an email with a randomly generated HTML output using a <button>?

I am currently working on a feature where a random HTML output is sent to me via email whenever a user clicks on a button on the website page. The user receives a code when they click the button, and I want that code to be emailed to my address automatical ...

javascriptphphtmlemailrandom

dynamic resizing, uniform dimensions

Is it possible to use CSS to ensure that an image is 100% the width of a fluid div without distorting the square shape? The goal is to match the height to the width for a cohesive look. Currently, I am using the following code for fluid width: .img{ max ...

css

The block is not responding to hovering as expected

I'm currently attempting to implement a hover effect for the entire anchor element, but unfortunately it's not functioning as expected. The drop-down menu disappears as soon as the mouse moves away from the text: Click here to view the test site ...

csshover

Creating a JavaScript function for a custom timed traffic light sequence

Currently, I am facing a challenge with my high school project of creating a timed traffic light sequence using JavaScript for my upcoming exams. Unfortunately, I feel quite lost and unsure about how to proceed. My initial plan involves formatting the valu ...

javascriptcss

The contact form is encroaching on the footer

The issue arises when the contact form overlaps with the footer. When testing the code on Codepen, the styles are correctly linked and working for everything except the contact form. I have attempted adjusting the padding, bottom position, etc., but nothin ...

htmlcssbootstrap-4

Angular 9 and Bootstrap 4 combined in a row featuring up to 2 items maximum

Here's the HTML I'm working with: <div class="row"> <div formArrayName="addresses" *ngFor="let address of addressesFormArr.controls; let i = index" [formGroupName]="i"> <div *ngIf="i % 2 === 0" class="col-auto"> ...

angularbootstrap-4

Angular JS: Changing Byte Array into an HTML File

I created an HTML file using ASPOSE workbook and stored it in a memory stream in C#. Now, I am trying to show this HTML file in an Angular JS environment within the Div element. C# Snippet: wb.Save(htmlMemoryStream, new HtmlSaveOptions() { IsExportComment ...

htmlarraysangularjstype-conversion

Gap created between two td or tr elements

Can someone please help me solve a troubling issue I'm facing with my CSS and HTML code? body { background-color:#ffffff; margin:0; padding-top:0px; } table.main-table-default { margin:0 auto; background-color:#00ffff; width:700px; border-collapse:co ...

htmlcss

Issue with custom page not displaying summary image in Moodle

Whenever I try to fetch a summary image on my customized page, it does not show the image's name and instead displays a small icon image. echo format_text($course->summary); Click here for an example image ...

phphtmlmysqlmoodle

What is the correct way to implement overflow-y: auto for vertical flex-items?

Check out this interactive example. Here is the HTML code: <div class="overflow"> <div class="block"> <div class="header"> This is a green header </div> <div class="content&q ...

htmlcssflexbox

Tips for adding text dynamically to images on a carousel

The carousel I am using is Elastislide which can be found at http://tympanus.net/Development/Elastislide/index.html. Currently, it displays results inside the carousel after a search, but I am struggling to dynamically add text in order to clarify to use ...

javascriptjqueryhtml

Adjust the appearance of input fields that exclusively have the value "1"

When designing my website, I encountered a problem with the style I chose where the number "1" looks like a large "I" or a small "L." I am wondering if there is a way to use JavaScript to dynamically change the font style for input fields that only contai ...

javascriptjquerycss

What causes the element to remain visible despite the changes made to the v-show attribute?

<!DOCTYPE html> <html> <head> <title>test</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p v-show="show&qu ...

javascripthtmlvue.jsweb

Storing Date Input in a Database Using PHP and mySQL

For my project, I'm working on a form that uploads an image, description, and date into a database. Everything is functioning smoothly except for the date field, which always shows up as 0000-00-00 regardless of what I do. Any suggestions on how to fi ...

phphtmlmysqlforms

Angular Material Tooltips

Seeking help on showcasing an array of elements in a list format using mat-angular tooltip. This code snippet belongs to app.component.html <button mat-raised-button matTooltip={{items}} aria-label="Button that displays a tooltip when focu ...

angulartypescriptangular-material