Bootstrap-4 drop-down gets some styles automatically. How to disable that?

Question

I am using Bootstrap-4 for my new website. I am using the drop-down in multiple places of the page. In the header nav-bar the drop-down works fine but when I use the same drop-down logic inside the page, bootstrap or popper is adding some inline styles, messing up my styles. Is there a way to disable this automatic inline CSS from getting added?

Below is the screenshot of faulty drop-down in the page,

Below is the screenshot of the correct dropdown in the top header.

Edit:

Code

Faulty Dropdown

<div className="pull-right">

              <div className="dropdown">
                <a
                  href="#sfsd"
                  className="dropdown-toggle"
                  data-toggle="dropdown"
                  id="dropdownMenuLink"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <i className="fa fa-ellipsis-v" aria-hidden="true" />
                </a>
                <ul className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                  <li className="dropdown-item">
                    <a href="#">
                      <i className="fa fa-language mr-2" />
                      <span>Switch to Arabic</span>
                    </a>
                  </li>
                  <li className="dropdown-item">
                    <a href="#UpdatePersonalInfo">
                      <i className="fa fa-user mr-2" />
                      <span>My Profile</span>
                    </a>
                  </li>
                  <li className="dropdown-item">
                    <a href="#ChangeSecuritySettings">
                      <i className="fa fa-cog mr-2" />
                      <span>My Configuration</span>
                    </a>
                  </li>
                  <li className="dropdown-item">
                    <a href="login.html">
                      <i className="fa fa-sign-out mr-2" />
                      <span>Logout</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>

Correct Dropdown

<div className="user-menu dropdown pull-right">
            <a
              href="#Menu"
              className="dropdown-toggle"
              data-toggle="dropdown"
              aria-expanded="false"
            >
              <i className="fa fa-gear fa-spin" />
            </a>
            <ul className="dropdown-menu dropdown-menu-right">
              <li className="dropdown-item">
                <a href="#">
                  <i className="fa fa-language mr-2" />
                  <span>Switch to Arabic</span>
                </a>
              </li>
              <li className="dropdown-item">
                <a href="#UpdatePersonalInfo">
                  <i className="fa fa-user mr-2" />
                  <span>My Profile</span>
                </a>
              </li>
              <li className="dropdown-item">
                <a href="#ChangeSecuritySettings">
                  <i className="fa fa-cog mr-2" />
                  <span>My Configuration</span>
                </a>
              </li>
              <li className="dropdown-item">
                <a href="login.html">
                  <i className="fa fa-sign-out mr-2" />
                  <span>Logout</span>
                </a>
              </li>
            </ul>

Answer 1

As stated in the docs, you can use the data-display option....

"By default, we use Popper.js for dynamic positioning. Disable this with static."

Just remember that then you'll have to handle positioning of the dropdown menu.

https://www.codeply.com/go/85fPF73EtF

---

Related: Bootstrap 4 dropdown menu within accordion

Answer 2

Please add your custom css code (it is not real solution but working )

@media (min-width: 0px) and (max-width: 991px) { 
  .dropdown-menu.show {
    transform: unset !important;
    position: unset  !important;
  }
  
 }