CODEWITHSUNDEEP
javascriptangularangular-materialng-bootstrap
James D
James D

Reputation: 2291

Angular material autocomplete combined with ngb modal

I'm trying to combine an autocomplete from angular material in a ng-bootstrap modal box. I expected the modal box to open and when the user types in the field, that the material autocomplete kicks in and shows the results. Instead the autocomplete gets displayed in the faded area, behind the modal. Half of the buttons are hidden, by the modal itself, and when you click the other half, in the faded area, the modal box just closes (expected that to happen when clicking the faded area). Using the up and down buttons, and the enter key to select, the autocomplete does work. The only real issue is that it's behind the modal.

As an example I made this stackblitz demo. When you click the button, the modal opens. When you click in the inputfield, the possible options are shown by angular material.

I thought the positioning would help or the z-index, but I didn't seem to find a solution with that. I'd prefer to use the bootstrap modal box, instead of the material one, so I'd prefer not to switch.

Upvotes: 0

Views: 958

Answers (2)

Eliseo
Eliseo

Reputation: 57939

just change the z-index of material. For this you can in styles.scss add:

.cdk-overlay-container,.cdk-global-overlay-wrapper,.cdk-overlay-connected-position-bounding-box {
  z-index: 9000
}

Well, some number greater than 1050

Upvotes: 1

paul
paul

Reputation: 22001

I found adding the following lines to autocomplete-filetr-example.css fixed the layer issue in firefox & chrome, I didn't check edge/ie:

/deep/ .cdk-overlay-container {
  z-index: 2000;
}

Upvotes: 2

Related Questions