Question 222316 in CSS Question posted in
Some basic documentation can be found here.

How to fix dropdown up and down arrow CSS issue?

In my application dropdown arrow up and down not working properly. I have tried but I do not know how to fix this issue.
If i click the dropdown, arrow should be up.
Again if i click the dropdown, arrow should be down.

If anyone knows, help me find the solution.

CSS:

.label::after {
    background-color: white;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    width: 10px;
    display: inline-block;
    height: 10px;
    transform: rotate(45deg);
    -webkit-transform: scale(1) rotate(45deg) translate(0px, 0px);
    -moz-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    margin-top: 10px;
    content: '';
    margin-left: 5px;
} 

.label::after {
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    transform: rotate(-135deg);
    -webkit-transform: scale(1) rotate(-135deg) translate(0px, 0px);
    -moz-transform: rotate(-135deg) scale(1);
    -o-transform: rotate(-135deg) scale(1);
}

HTML:

<i class="label"></i>

Demo:

Tags:

3

Answers


  1. 0

    Hi,

    if I correct understood Your problem is position of this arrow.

    Answer edited after the question edit.

    Solution

    In this case a CSS selector :has() can be helpful. We need to apply another styles (arrow rotation) when the dropdown is showed and you add it via JS, so we check when the dropdown container has the options.

    app-multi-select-dropdown:has(.drop-show) .label {
    transform: rotate(180deg);
}

    I would also delete the top and left margin setting in .label[_ngcontent-c2]::after to avoid false rotating.

    Knowledge

    You can read more about :has() selector e.g. here.

    Now quickly I didn’t go into the details of why, maybe it’s related to the browser version, but for me this solution works on Google Chrome and on Mozilla Firefox not.

    Cheers

    Login or Signup to reply.
  2. 0

    I used the state which was used to open and close the dropdown and applied it to the label and it works perfectly. I don’t think only CSS is capable of handling that state.

    Edit: The alignment issue is also fixed. Here is the Stackblitz Link.

    /* Changes in CSS */

button.drop-toggle .label::after {
  transform: rotate(-135deg);  
}

button.drop-toggle .label-initial::after {
  transform: rotate(45deg);
  position: relative;
  top: -5px;
}

button.drop-toggle{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
    <!-- Changes in multi-select-dropdown-component.html -->

<i class="label" *ngIf="showDropDown"></i>
<i class="label label-initial" *ngIf="!showDropDown"></i>
    Login or Signup to reply.
  3. 0

    To make the dropdown arrow change direction (up or down) when clicked, you can use some JavaScript or jQuery to toggle a CSS class that rotates the arrow accordingly. Here’s a step-by-step guide on how to apply this functionality:

    1 HTML Structure:
    Assuming you have an HTML structure like this for your dropdown:

    <div class="dropdown">
  <button class="dropdown-toggle" id="dropdownBtn">
    Dropdown
    <span class="arrow"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown options here -->
  </ul>
</div>

    ** 2 CSS:**
    Add some CSS to style the dropdown arrow. We’ll use a CSS arrow that changes direction when we toggle a class:

    .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #000;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.arrow.up {
  transform: rotate(-180deg);
}

    3 JavaScript (with jQuery):
    Next, include jQuery in your project (if you haven’t already) and add the following JavaScript code:

    <script>
  $(document).ready(function () {
    $("#dropdownBtn").on("click", function () {
      $(".dropdown-menu").slideToggle();
      $(".arrow").toggleClass("up");
    });
  });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search