CODEWITHSUNDEEP
cssbootstrap-4
Jonathan Small
Jonathan Small

Reputation: 1079

Bootstrap menu instead of <select>

Im finding that a <select> with <option> has limited styling options so I am trying to implement a bootstrap menu which will give me more styling options. I have the basic structure like this:

<style>
    .menuBox {
        width: 200px;
    }
    .lightBlueBackground {
        background-color: aqua;
    }
    .darkBlueBackground {
        background-color: blue
    }
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle border border-dark menuBox" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
                 
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item width background-color" href="#" id="aValue">Aaaaaaaaaaaaaa</a>
                    <a class="dropdown-item width background-color" href="#" id="bValue">Bbbbbbbbbbbbbbbbbbbbbbb</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<script>
$(document).ready(function () {
    $('#aValue').click(function () {
        console.log('A');
        $('#navbarDropdown').text("Aaaaaaaaaaaaaa");
    })
    $('#bValue').click(function () {
        console.log('B');
        $('#navbarDropdown').text("Bbbbbbbbbbbbbbbbbbbbbbb")
    })
});
</script>

In a <select> the down arrow is pinned to the right. In the navbar, the down arrow appears to be to the immediate right of the text in the <a class="nav-link dropdown-toggle> element.

I need the box that would normally hold the menu item text to be blank and the down arrow to be pinned to the far right. The text will get filled based on the dropdown menu that the user selects.

How do I pin the down arrow to the right side of the <a>?

Thank you for any assistance.

Upvotes: 1

Views: 94

Answers (1)

Andi
Andi

Reputation: 2992

You can change the button itself to use flexbox properties, then just justify it to flex-end (right). You'll lose the default padding from the base settings so I just added it back in using p-3

$(document).ready(function() {
  $('#aValue').click(function() {
    console.log('A');
    $('#navbarDropdown').text("Aaaaaaaaaaaaaa");
  })
  $('#bValue').click(function() {
    console.log('B');
    $('#navbarDropdown').text("Bbbbbbbbbbbbbbbbbbbbbbb")
  })
});
.menuBox {
  width: 200px;
}

.lightBlueBackground {
  background-color: aqua;
}

.darkBlueBackground {
  background-color: blue;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle border border-dark menuBox d-flex justify-content-end align-items-center p-3" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">

        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item width background-color" href="#" id="aValue">Aaaaaaaaaaaaaa</a>
          <a class="dropdown-item width background-color" href="#" id="bValue">Bbbbbbbbbbbbbbbbbbbbbbb</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Or, you can use FA instead and override the pseudo caret Bootstrap is using your own pseudo element:

$(document).ready(function() {
  $('#aValue').click(function() {
    console.log('A');
    $('#navbarDropdown').text("Aaaaaaaaaaaaaa");
  })
  $('#bValue').click(function() {
    console.log('B');
    $('#navbarDropdown').text("Bbbbbbbbbbbbbbbbbbbbbbb")
  })
});
.menuBox {
  min-width: 200px;
}

.lightBlueBackground {
  background-color: aqua;
}

.darkBlueBackground {
  background-color: blue;
}

.dropdown-toggle::before {
  display: inline-block;
  font: var(--fa-font-solid);
  content: "\f0d7";
  float: right;
  margin-top: 0.2em;
}

.dropdown-toggle::after {
  border: none !Important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle border border-dark menuBox" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item width background-color" href="#" id="aValue">Aaaaaaaaaaaaaa</a>
          <a class="dropdown-item width background-color" href="#" id="bValue">Bbbbbbbbbbbbbbbbbbbbbbb</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 1

Related Questions