[BUG] ng-select Dropdown is slightly off on modals

[Fagiolia1]

Describe the bug
When a select is being used within a modal, the dropdown menu underneath the input is slightly off to left.

To Reproduce
Steps to reproduce the behavior:

1. Go to a modal with an ng-select element.
2. Click on select box.
3. See error

Expected behavior
The dropdown menu should be directly below the input.

Screenshots

[eligolding]

This issue is related to the need to add appendTo="body". It was reported in ng-select, and the supposed solution is to make sure you set position: relative on the body. I tried that and it still did not work.

You can see my comment here that we might not need appendTo after all, so this issue will go away.

[grahamhency]

Closed with #471

[IoSono000]

Hi, i continue to have the same problem. If I insert the component in a simple html page no problem, but if I insert it in a more complex context, the problem remains ...

[grahamhency]

@IoSono000 can you provide an example? What version of Goponents are you running?

[IoSono000]

@IoSono000 can you provide an example? What version of Goponents are you running?

Hi, the version is last (3.7.3).

--- OK --

  <form aria-labelledby="dati-ispezione" [formGroup]="intermediarioSrcForm" class="form-horizontal mt-3" novalidate>

    <div class="row">
      
      <div class="col-md-12">
        <div class="form-group">

          <label for="tipologia" translate>HOME.SEARCH_ADV.LBL_TIPOLOGIA</label>
		
		  <!-- KO -->
          <ng-select 
            appendTo="body"
            class="ng-select-custom-big" 
            labelForId="tipologia" 
            [items]="profiliRischio"
            [multiple]="true"
            [hideSelected]="true"
            [closeOnSelect]="false"
            formControlName="tipologia">
          </ng-select>
        </div>
      </div>

    </div>

  </form>
  
</div>

[grahamhency]

@IoSono000 that is not using the go-select. If you're looking for the documentation on ng-select you'll want to check https://github.com/ng-select/ng-select

[IoSono000]

@IoSono000 that is not using the go-select. If you're looking for the documentation on ng-select you'll want to check https://github.com/ng-select/ng-select

sorry but your note is not clear. The implementation was done as per documentation.

[grahamhency]

@IoSono000 this repo is not the ng-select project. We implement the ng-select component in this project for our go-select. If you're trying to troubleshoot an issue with ng-select then you'll need to look at their documentation.

If you are trying to use our Goponents library then you need to be using go-select here.

[IoSono000]

@IoSono000 this repo is not the ng-select project. We implement the ng-select component in this project for our go-select. If you're trying to troubleshoot an issue with ng-select then you'll need to look at their documentation.

If you are trying to use our Goponents library then you need to be using go-select here.

Ok, thanks and sorry

[renanramos]

Hi @IoSono000
Have you found a solution for that? I've looking for a way to handle but unfortunately, I didn't find anything yet :/

[grahamhency]

@renanramos this is not the ng-select repo so this issue probably doesn't apply to you. However, we implemented a solution through CSS. It is messy, but it works for us.

// overrides incorrect alignment when appendTo body is applied to an ng-select
body > .ng-dropdown-panel {
  margin-left: 4px;
}

[IoSono000]

@renanramos this is not the ng-select repo so this issue probably doesn't apply to you. However, we implemented a solution through CSS. It is messy, but it works for us.

// overrides incorrect alignment when appendTo body is applied to an ng-select
body > .ng-dropdown-panel {
  margin-left: 4px;
}

Thanks, i added the following statement to the scss file
:: ng-deep ng-dropdown-panel {
   margin-left: 9px;
}

the problem is that if I resize the page that left margin is no longer good and it is misaligned again ... have you done this test?

[grahamhency]

@IoSono000 we have not handled that case yet.

[renanramos]

@grahamhency Thanks!
I'll use this approach in my case.