title: ng-dropdown-panel in ng-select - how to keep its custom styles even when appendTo="body" is used
body: <p>For demonstartions created a Stackblitz with almost an empty project with <code>ng-select</code> with no extra custom styles. And getting this issue of width of the <code>ng-dropdown-panel</code> when I am passing <code>appendTo="body"</code></p>
  
  <p><a href="https://stackblitz.com/edit/github-byjnda" rel="nofollow noreferrer">https://stackblitz.com/edit/github-byjnda</a></p>
  
  Details below
  
  <p>I am using <code>ng-select</code> and have quite a bit of custom styles defined to it as below in a .scss file using <code>@mixin</code> as below</p>
  
  <pre class="lang-css prettyprint-override"><code>
  @mixin custom-ng-select {
    @include custom-ng-select-ip();
    @include custom-text-body-light-2();
  
    caret-color: mat-color($sdk-secondary, 500);
  
    &amp;.ng-select .ng-select-container {
      box-shadow: none;
      min-height: $custom-ng-select-height;
      display: flex;
      align-items: center;
    }
  
    &amp;.ng-select.ng-select-single .ng-select-container {
      height: $custom-ng-select-height;
    }
  
   &amp;.ng-select
      &amp;.ng-dropdown-panel
      .ng-dropdown-panel-items
      .ng-option.ng-option-marked {
      padding-left: $custom-ng-select-pl;
      height: $custom-ng-select-height;
    }
  
  ...and many more styles...
  
  </code></pre>
  
  <p>And then in my Angular app's global <code>styles.scss</code> file getting this custom styles @mixin as below</p>
  
  <pre><code>.ng-select {
    @include custom-ng-select();
  }
  </code></pre>
  
  <p><strong>And this is working fine as expected.</strong></p>
  
  <p>But when I am rendering <code>&lt;ng-select&gt;</code> with <code>appendTo="body"</code> then the <code>ng-dropdown-panel</code> is no more taking the custom styles and the reason is as below per <a href="https://github.com/ng-select/ng-select/blob/3018a1098ba2ad06fbdf4dfe60209087cbd68185/src/demo/app/examples/append-to-example/append-to-example.component.html" rel="nofollow noreferrer">ng-select official doc</a></p>
  
  <p><code>By default dropdown panel is rendered as child element of ng-select, but you can append dropdown to any element using appendTo</code></p>
  
  <p>That is in below case <code>ng-dropdown-panel</code> is no more a child of <code>ng-select</code> </p>
  
  <pre><code>    &lt;ng-select
        appendTo="body"
        [items]="items"
        [bindLabel]="'name'"      
      &gt;
      &lt;/ng-select&gt;
  </code></pre>
  
  <p>How do I do that, any guidance will be a life-saver.</p>
  
  <p>Below screenshot is the top-most <code>ng-select</code> and this is how <code>ng-dropdown-panel</code>'s custom styles is getting broken when using with <code>appendTo="body"</code></p>
  
  <p><a href="https://i.stack.imgur.com/FEZDD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FEZDD.png" alt="enter image description here"></a></p>
  
  <p>And below screenshots where I have NOT used <code>appendTo="body"</code></p>
  
  <p><a href="https://i.stack.imgur.com/fXYDV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fXYDV.png" alt="enter image description here"></a></p>