search

Promact / md2

Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
http://code.promactinfo.com/md2/
MIT License
379 stars 111 forks source link

Conflicting OverlayContainers md2 vs @angular/material #231

Closed MarcusCalidus closed 7 years ago

MarcusCalidus commented 7 years ago

proposal:

I just ran into that issue while using md2 in conjunction with @angular/material dialogs. Since our policy is to primarily use @angular/material there arises a problem when you use md2-datepicker on a md-dialog component. Since both libraries use OverlayContainers with the same css class it depends on the time of overlay container element creation whether the md2-datepicker is shown behind the md-dialog overlay. This can however easily be fixed when you import OverlayContainer from md2 and give it a slightly higher zIndex.

So this issue is mainly for documenting the workaround. It would be great however if there would be better compatibility between both of these great libraries. Maybe using the same overlay provider?

import { OverlayContainer } from 'md2'

constructor( private md2Overlay: OverlayContainer ) { }

ngOnInit() { this.md2Overlay.getContainerElement().style.zIndex = '1001'; }

dharmeshpipariya-zz commented 7 years ago

@MarcusCalidus we have fixed this issue in the latest version, please go through it.