CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
Adrian
Adrian

Reputation: 61

Angular Dropdown when expanded is showing up at bottom of screen

What the webpage looks like

So I am trying to make a dropdown but when the dropdown is clicked it displays not overlapping the other input, but at the bottom of the screen.

Here is the relevant chunk of HTML code:

                <div class="form-row">
                   <!-- Grid column -->
                   <div class="col-md-6">
                      <mat-form-field>
                         <mat-label>Toppings</mat-label>
                         <mat-select [formControl]="toppings" multiple>
                            <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
                         </mat-select>
                      </mat-form-field>
                   </div>
                   <!-- Grid column -->
                   <!-- Grid column -->
                   <div class="col-md-6">
                      <!-- Material input -->
                      <div class="md-form form-group">
                         <input mdbInput type="password" class="form-control" id="inputPassword4MD" placeholder="John's Law Firm">
                         <label for="inputPassword4MD">Firm Name</label>
                      </div>
                   </div>
                   <!-- Grid column -->
                </div>
                <!-- Grid row -->

This is the relevant part of the ts file:

toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
  constructor() { }

And finally, this is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { AboutComponent } from './about/about.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './home/home.component';
import {MatButtonModule,MatIconModule} from '@angular/material';
import { ContactComponent } from './contact/contact.component';
import { ServicesComponent } from './services/services.component';
import { ScheduleComponent } from './schedule/schedule.component';
import {MatInputModule} from '@angular/material/input';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatSelectModule} from '@angular/material/select';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    AboutComponent,
    HomeComponent,
    ContactComponent,
    ServicesComponent,
    ScheduleComponent,
    ContactComponent,
    ServicesComponent,
    ScheduleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Views: 1143

Answers (1)

AlmaniaM
AlmaniaM

Reputation: 217

You'll need an Angular material core theme in your styles.scss file. Just add this in styles.scss:

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

or whatever other themes you want. You'll need the core theme for components to act right and then you can create a custom theme if you don't like the core default colors.

Upvotes: 1

Related Questions