CODEWITHSUNDEEP
htmlcssangularnavbarprimeng
degath
degath

Reputation: 1621

PrimeNg confirmDialog make changes on my navbar

My navbar works really well and it is fully responsible, but when I open confirm dialog in background my navbar width goes to 800px even if screen has 1480px making an empty space on the right side like you can notice on the screen.

cut off navbar

I really don't have idea how to fix it, this is my navbar:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="">frontend</a>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a>
        <div class=" dropdown dropdown-menu">
          <a class="dropdown-item menu-item" routerLink="/topic"> Vehicles list </a>
          <a class="dropdown-item menu-item" routerLink="/add-topic"> Add vehicle </a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<router-outlet></router-outlet>

I use default confirm dialog from primeNg without any changes: confirm dialog

Maybe I could somehow make additional css to navbar to make position allways on 100% of screen? Any ideas how could I do that?

Upvotes: 0

Views: 336

Answers (1)

Paresh Gami
Paresh Gami

Reputation: 4782

You are using bootstrap navbar and primeng so some css are getting conflict. If you write below css in style.css so navbar working normal.

.ui-overflow-hidden {
    position: unset !important;
}

Upvotes: 1

Related Questions