akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/nebular
MIT License
8.06k stars 1.51k forks source link

Same issue happening when add nb-select inside Feature module. Not working even with nb-layout wrapping all app. Any help? #2180

Open AlaaEl-DinAhmed opened 4 years ago

AlaaEl-DinAhmed commented 4 years ago

Same issue happening when add nb-select inside Feature module. Not working even with nb-layout wrapping all app. Any help?

Originally posted by @Mayocampo in https://github.com/akveo/nebular/issues/943#issuecomment-484993286

Destreyf commented 4 years ago

I'm not sure if it's applicable, but make sure that you do not have more than one nb-layout, once you add a second layout the "overlay" used to reference the list of items can't render correctly, this drove me insane trying to figure out and is incredibly un-intuitive.

unrealisted commented 4 years ago

Same issue with datepicker. I have structure like a ngx-admin(with one ngx-one-column-layout preset and no more), but inside feature modules: Cannot read property 'appendChild' of undefined at NbOverlayContainerAdapter._createContainer Wrapping it in layouts => breaking default styles/scrolls and etc.

Destreyf commented 4 years ago

@unrealisted Are you creating the elements inside of the nb-layout and nb-layout-column?

Would it be possible for you to share your general layout?

unrealisted commented 4 years ago

@unrealisted Are you creating the elements inside of the nb-layout and nb-layout-column?

Would it be possible for you to share your general layout?

@Destreyf Sorry, i can attach only screens:

Screenshot_1 Screenshot_2

kakid commented 4 years ago

Hello,

Here you will found a working sample with lazy loaded module : Nebular Stackblitz with lazy loading

I had the same issue, I fixed it with loading the nbSelect directly in my child module, in my first approach, I loaded all my nubelar dependancy throw a custom nebular module. my nebular module looked like :

import { NgModule } from '@angular/core';
import {
        NbThemeModule,
        NbSidebarModule,
        NbToastrModule,
        NbLayoutModule,
        NbSelectModule    
} from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { DirectionService } from './services/direction.service';
@NgModule({
    imports: [
        NbThemeModule.forRoot(,
        NbSidebarModule.forRoot(),
        NbToastrModule.forRoot(),
        NbLayoutModule,
        NbSelectModule
    ],
    exports: [
        NbThemeModule,
        NbSidebarModule,
        NbToastrModule,
        NbLayoutModule,
        NbSelectModule    
    ],
    providers: [DirectionService]
})
export class NebularModule {}
snakone commented 4 years ago

i know people says only use one <nb-layout> for your entire app, i had the same issue, quite desperate, i tried to wrap the child <router-outlet> where you have the pop-up with this

<nb-layout>
      <nb-layout-column>
        <router-outlet></router-outlet>
      </nb-layout-column>
</nb-layout>

woala!! problem solved, working on a thrid child of the main router-outlet

tegola commented 3 years ago

I have managed to solve this. See here.