question about data-bs-popper

[ga1008ne]

is there a way for class="dropdown-menu" to not has data-bs-popper="static" that default from wrapped with class="navbar"

<header class="navbar main-header navbar-fixed-top bg-primary sidebar-collapse navbar-expand-md">
     <div class="second-navbar">
             <button type="button" class="btn btn-sm btn-primary">    
             <span>Update</span>
             </button>

             <button type="button" class="btn btn-sm dropdown-toggle dropdown-toggle-split btn-primary" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
             <span class="visually-hidden">Toggle Dropdown</span>
             </button>

             <ul class="dropdown-menu">
                     <li class="dropdown">
                           <button class="dropdown-item"><i class="fa fa-edit"></i><span>Update</span></button>                 
                     </li>
                     <li class="dropdown">
                            <button class="dropdown-item"><i class="fa fa-edit"></i><span>Upd. Berangkat</span></button>                
                     </li>
             </ul>
    </div>
</header>

even if i add data-bs-display="dynamic" in button the dropdown-menu still has data-bs-popper="static"

 <button type="button" class="btn btn-sm dropdown-toggle dropdown-toggle-split btn-primary" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent" data-bs-display="dynamic"> 
<ul class="dropdown-menu" data-bs-popper="static">

[julien-deramond]

Based on the code here:

bootstrap/js/src/dropdown.js

Lines 312 to 319 in 30e0152

	// Disable Popper if we have a static display or Dropdown is in Navbar
	if (this._inNavbar || this._config.display === 'static') {
	Manipulator.setDataAttribute(this._menu, 'popper', 'static') // TODO: v6 remove
	defaultBsPopperConfig.modifiers = [{
	name: 'applyStyles',
	enabled: false
	}]
	}

It seems the answer is no. The algorithm explicitly checks if the dropdown is inside a navbar and then enforces the attribute data-bs-popper="static".

There may be a potential workaround, though: the algorithm determines whether it's in a navbar by checking for the presence of the .navbar class. If you create a class that duplicates .navbar but uses a different class name, it might bypass the check. Otherwise, overriding this behavior directly doesn't seem possible.

[ga1008ne]

i see, Thanks for answering sir

is there a clue for the "potential workaround"?

[julien-deramond]

I haven't tested this, but in Sass, you could try something like:

.whatever {
  @extend .navbar;
}

// However, be cautious about the following rules:
/*
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl
*/

Instead of using .navbar, you'd use .whatever, which should result in the same rendering.
So Bootstrap dropdown.js code won't trigger the condition if (this._inNavbar || this._config.display === 'static') anymore because it's looking for .navbar as the parent.
I'm not sure about the possible other impacts.

It's quite a hacky workaround! Personally, I wouldn’t recommend it unless you're really stuck with the data-bs-popper="static" issue. There might be better solutions, but this was the first that came to mind.

[ga1008ne]

That's... quite of workaround
I can't say i'm really stuck with the data-bs-popper="static" issues per se...

Sorry i should give you the screenshot for what i encounter

because in this case i can just use Bootstrap class .dropdown-menu-end dropdown-menu-md-start right?

it's more like i'm just wondering/curious?
Because only in this special case which is .btn-group that inside a .navbar i wan't the .dropdown-menu to be dynamically position

[julien-deramond]

because in this case i can just use Bootstrap class .dropdown-menu-end dropdown-menu-md-start right?

Yes, you can certainly do that based on your rendering needs. In our documentation, we consistently use .dropdown-menu.dropdown-menu-end for the theme selector, since the dropdown in the header is aligned to the right. This helps prevent any alignment issues across various breakpoints. Alternatively, we could have taken a more granular approach, such as using dropdown-menu dropdown-menu-end dropdown-menu-xxl-start (by testing that it actually works at any breakpoints).