CODEWITHSUNDEEP
htmlcssbootstrap-4
None
None

Reputation: 5670

Dropdown menu cutting off

When I click on the menu to expand it, Page also gets expanded and a scroll bar comes for the page. or it gets cut off. How can I solve this using bootstrap?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<nav class="navbar navbar-expand-xl navbar-light bg-light">

  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
    <div class="navbar-nav ml-auto">
      <div class="nav-item dropdown">
        <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle user-action"> P<b class="caret"></b></a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item"><i class="fa fa-user-o"></i> Profile creation</a></a>
          <a href="#" class="dropdown-item"><i class="fa fa-calendar-o"></i> Calendar</a></a>
          <a href="#" class="dropdown-item"><i class="fa fa-sliders"></i> Settings</a></a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item"><i class="material-icons">&#xE8AC;</i> Logout</a></a>
        </div>
      </div>
    </div>
  </div>
</nav>

Codepen demo

Upvotes: 1

Views: 67

Answers (1)

isherwood
isherwood

Reputation: 61055

Add dropdown dropdown-menu-right to your dropdown.

https://getbootstrap.com/docs/4.5/components/dropdowns/#menu-alignment

[Menu only shows in full page demo mode.]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<nav class="navbar navbar-expand-xl navbar-light bg-light">

  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
    <div class="navbar-nav ml-auto">
      <div class="nav-item dropdown">
        <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle user-action">Menu<b class="caret"></b></a>
        <div class="dropdown-menu dropdown-menu-right">
          <a href="#" class="dropdown-item"><i class="fa fa-user-o"></i> Profile creation</a></a>
          <a href="#" class="dropdown-item"><i class="fa fa-calendar-o"></i> Calendar</a></a>
          <a href="#" class="dropdown-item"><i class="fa fa-sliders"></i> Settings</a></a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item"><i class="material-icons">&#xE8AC;</i> Logout</a></a>
        </div>
      </div>
    </div>
  </div>
</nav>

Upvotes: 3

Related Questions