Issue with Bootsrap 4 Dropdown Menu Displaying Incomplete Links

Question

Issue with Bootsrap 4 Dropdown Menu Displaying Incomplete Links

There seems to be an issue with the Bootstrap 4 dropdown menu not displaying all the links. Please refer to the image below:

https://i.sstatic.net/ZS2t2.png

The dropdown menu is not showing beyond the red band. I can't seem to figure out what I'm missing. Is there something I'm overlooking?

.red-block{
  height: 220px;
  background-color: red;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <div class="container-fluid no-padding mt-3">
      <div class="row no-gutter">
        <div class="col-md-6">
          <div class="red-block ">
             <div class="title">
                <div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
                   <h4 class="text-left">our <span>Services</span></h4>
                   <hr class="light" align="left" style="width:22%;">
                 </div>
                 </div>
                 <div class="dropdown ml-20">
                  <button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
                    State
                  </button>
                    <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Link 1</a></li>
                    <li><a class="dropdown-item" href="#">Link 2</a></li>
                    <li><a class="dropdown-item" href="#">Link 3</a></li>
                  </ul>
                </div>
          </div>
        </div>

<!-- begin snippet: js hide: false console: true babel: false -->

**

It appears that "Link 3" is not visible. Can someone help correct this?

javascript css html twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Could you please share your complete code with me? Regardless, I suggest trying out my code to see if it resolves the issue. In my code, I have updated your div and anchor elements to utilize a ul - li - anchor structure.

Once you've tried it, let me know if it makes a difference.

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
  <div class="dropdown ml-20">
   <button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
     State
   </button>
     <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Link 1</a></li>
     <li><a class="dropdown-item" href="#">Link 2</a></li>
     <li><a class="dropdown-item" href="#">Link 3</a></li>
   </ul>
 </div>
</body>
</html>

Answer 2

Could you please share your complete code with me? Regardless, I suggest trying out my code to see if it resolves the issue. In my code, I have updated your div and anchor elements to utilize a ul - li - anchor structure.

Once you've tried it, let me know if it makes a difference.

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
  <div class="dropdown ml-20">
   <button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
     State
   </button>
     <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Link 1</a></li>
     <li><a class="dropdown-item" href="#">Link 2</a></li>
     <li><a class="dropdown-item" href="#">Link 3</a></li>
   </ul>
 </div>
</body>
</html>

Answer 3

Answer №2

Consider incorporating the following code snippet into your CSS:

It's uncertain whether this code will be effective within your HTML document.

.dropdown-menu{
  position: relative;
  z-index: -1;
}

Answer 4

Consider incorporating the following code snippet into your CSS:

It's uncertain whether this code will be effective within your HTML document.

.dropdown-menu{
  position: relative;
  z-index: -1;
}

Answer 5

Answer №3

At times, you may encounter an issue where an element cannot be displayed properly due to being outside a container with the property overflow: hidden. To address this problem, you have a couple of options:

Option 1: Check for any elements with overflow: hidden and modify them.

Option 2: Reposition the .dropdown element adjacent to div.red-block as shown below:

HTML

 <div class="container-fluid no-padding mt-3">
  <div class="row no-gutter">
    <div class="col-md-6">
      <!-- RED BLOCK -->
      <div class="red-block ">
        <div class="title">
          <div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
            <h4 class="text-left">our <span>Services</span></h4>
            <hr class="light" align="left" style="width:22%"/>
          </div>
        </div>
      </div>
      <!-- END RED BLOCK 
       DROPDOWN -->
      <div class="dropdown ml-20">
          <button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
            State
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
          </ul>
        </div>
    </div>
<!-- END DROPDOWN -->

CSS

.red-block{
  background-color: red;
  height: 220px;
}
.dropdown.ml-20{
   position: absolute;
    bottom: 25%;
}

I trust this solution proves beneficial.

Answer 6

At times, you may encounter an issue where an element cannot be displayed properly due to being outside a container with the property overflow: hidden. To address this problem, you have a couple of options:

Option 1: Check for any elements with overflow: hidden and modify them.

Option 2: Reposition the .dropdown element adjacent to div.red-block as shown below:

HTML

 <div class="container-fluid no-padding mt-3">
  <div class="row no-gutter">
    <div class="col-md-6">
      <!-- RED BLOCK -->
      <div class="red-block ">
        <div class="title">
          <div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
            <h4 class="text-left">our <span>Services</span></h4>
            <hr class="light" align="left" style="width:22%"/>
          </div>
        </div>
      </div>
      <!-- END RED BLOCK 
       DROPDOWN -->
      <div class="dropdown ml-20">
          <button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
            State
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
          </ul>
        </div>
    </div>
<!-- END DROPDOWN -->

CSS

.red-block{
  background-color: red;
  height: 220px;
}
.dropdown.ml-20{
   position: absolute;
    bottom: 25%;
}

I trust this solution proves beneficial.

Issue with Bootsrap 4 Dropdown Menu Displaying Incomplete Links

Answer №1

Answer №2

Answer №3

Similar questions

When CSS Display table is resized at media query breakpoints, it causes other cells to disappear

Can I use the mouseover event on an image to display a sibling div?

Preventing page refresh when typing in a form input: Tips and tricks

Struggling to pass Chai tests with Node and Express.js when trying to handle POST requests

What is the process for setting up nested routes using React router?

You cannot reassign NodeJS global variables

Obtain information from YouTube and format it into a list item

Exploring custom JavaScript with Construct 2's generated code

Hovering over the image causes it to flicker and it remains the same

Implementing Validation for DropdownChoices and Checkboxes in Wicket Java

The font weight is failing to take effect

Require assistance in understanding JSON data in the form of a variable

"Obtaining Data from Local Storage on a Different Page: A Step-by-

Arrange various Div elements of varying sizes in a predetermined sequence

CSS3 animation for rotating elements

The intended functionality of clicking on an image is exclusively reserved for its immediate parent element

Issue with Stack Divider not appearing on Chakra UI card

Adding multiple elements with varying content to a separate division

Encountering an issue with connecting nodejs to mqlight

A division of text is colliding with a division that holds a list with no particular