Not able to position ngbootstrap dropdown menu

Question

I want to change the position of ngbootstrap dropdown menu in an Angular app but am not able to do that.

I want to override the inline style changes of the following code

<div _ngcontent-c13="" aria-labelledby="columnToggle" ngbdropdownmenu="" class="dropdown-menu show" x-placement="bottom-left" style="top: 40px; left: 0px;">

I tried using this in my component CSS

ngb-dropdown-menu /deep/ .dropdown-menu.show{
  top: 40px;
  left: -50px;
}

here is the HTML for the same

 <div ngbDropdown class="d-inline-block">
      <button class="btn btn-custom" id="columnToggle" ngbDropdownToggle ngbTooltip="Filter by Column Headers">
        <fa-icon [icon]="faColumns" title="Select to Show/Hide Columns"></fa-icon>
      </button>
      <div ngbDropdownMenu aria-labelledby="columnToggle">
        <button class="dropdown-item" *ngFor="let column of columnList">
          <label>
            <input type="checkbox" [checked]="column.selected" (change)="changeSelectedColumns.emit(column)" [disabled]="column.disabled"
            /> {{column.header}}
          </label>
        </button>
      </div>
    </div>

But I am not able to do that. How should I do that?

Answer 1

First thing is you can not overwrite the inline style on an HTML element from CSS file. If you want to do so then you need to add !important in CSS file. Take a look at the code below:

.my-drop-down .dropdown-menu.show {
    top: 40px !important;
    left: -50px !important;
}

Second, if you want to overwrite the external sources styles (like bootstrap, material design) then you need to write your styles in global CSS file or change your component's encapsulation to NONE. See below example:

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

Add custom CSS class to your dropdown if you want to overwrite CSS for specific places. I have added my-drop-down class to div. See code below:

<div ngbDropdown class="d-inline-block my-drop-down">
    <button class="btn btn-custom" id="columnToggle" ngbDropdownToggle ngbTooltip="Filter by Column Headers">
        <fa-icon [icon]="faColumns" title="Select to Show/Hide Columns"></fa-icon>
    </button>
    <div ngbDropdownMenu aria-labelledby="columnToggle">
        <button class="dropdown-item" *ngFor="let column of columnList">
            <label>
                <input type="checkbox" [checked]="column.selected" (change)="changeSelectedColumns.emit(column)" [disabled]="column.disabled"
                /> {{column.header}}
            </label>
        </button>
    </div>
</div>

Answer 2

write inline CSS for the dropdown menu.

style="margin-left: -50px; margin-top: 40px";

<div _ngcontent-c13="" aria-labelledby="columnToggle" ngbdropdownmenu="" class="dropdown-menu show" x-placement="bottom-left" style="margin-top: 40px; margin-left: -50px;">

It will override the position of the dropdown.