how to disable auto position of bootstrap 4.1

Question

My current dropdown list is large. See the image below.

How to fix this issue? I'm thinking of using proper JS to reposition the menu. Please help. How can I disable auto-positioning?

Here's an example of my code

<div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Action
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Something else here</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </div>

NOTE : When I scroll the page, an inline css applies on dropdown menu, and change css property as screen scroll. How can I fix this issue?

element.style {
    left: 0px;
    position: absolute;
    transform: translate3d(16px, -258px, 0px);
    top: 0px;
    will-change: transform;
}

Thanks in advance

proper js change the inline style according to screen size. i want to stop or disable that. element.style { left: 0px; position: absolute; transform: translate3d(16px, -258px, 0px); top: 0px; will-change: transform; } — Rohit Sharma, Jun 22 '18 at 12:49

score 3 · Answer 1 · answered Jan 14 '20 at 05:20

3

If you want to disable, you must use some negative trick with only css.You need to write some css to overwrite css.So, you can use transform unset like

.dropdown-menu.show {
  transform: unset !important;
}

answered Jan 14 '20 at 05:20

NayDwe

649
3
11

score 0 · Answer 2 · answered Jun 22 '18 at 12:14

0

If I understand your query correctly, you're Bootstrap 4 dropdown is larger than you want. To resolve, you could add an overflow to the dropdown-menu

.menu-scroll {
  overflow-y: scroll;
  max-height: 200px;
}

answered Jun 22 '18 at 12:14

billy.farroll

1,903
2
15
23

not its not right solution. can you tell me how can i disable proper js in dropdown menu – Rohit Sharma Jun 22 '18 at 12:54

score 0 · Answer 3 · answered Jun 22 '18 at 12:26

0

Add a class next to dropdown-menu, for example .menu-scrolling and then set custom css:

.menu-scrolling {
          min-height: 1oopx!important; /*Your value */
          max-height: 250px!important; /*Your value*/
          overflow-y: auto!important;
        }

answered Jun 22 '18 at 12:26

NoLimits

59
1
9

its not solution https://imgur.com/a/eIOCbHX if we fix the menu with height so its child menu will be hide, – Rohit Sharma Jun 22 '18 at 12:43
the element style change according to screen size i don't know why. here is style – Rohit Sharma Jun 22 '18 at 12:47
element.style { left: 0px; position: absolute; transform: translate3d(16px, -258px, 0px); top: 0px; will-change: transform; } – Rohit Sharma Jun 22 '18 at 12:47
You should put overflow-x:hidden, and put those changes only for the one element, no to the child ones. – NoLimits Jun 22 '18 at 12:48
i want to disable proper js auto positioning. can you tell me how? – Rohit Sharma Jun 22 '18 at 13:13
https://stackoverflow.com/questions/49323672/bootstrap-4-dropdown-disable-auto-placement-caused-by-popper-js maybe this can help then – NoLimits Jun 22 '18 at 13:29

score 0 · Answer 4 · answered Jun 22 '18 at 13:36

Put this line in your js file.

Popper.Defaults.modifiers.preventOverflow = { enabled: false };

for disable proper js.

and add some parameter in dropdown(data-flip="false",data-boundary="window" ) like this

          <a data-toggle="dropdown" href="#" data-flip="false" data-boundary="window" aria-expanded="true"  >
                <i class="icon-menu "></i>
                <span class="change-text">Select a Category</span>
            </a>

how to disable auto position of bootstrap 4.1

4 Answers4