How to position caret in bootstrap dropdown

Question

I'm trying to position the caret to the right so it doesn't move when I select an option.

$('#dropdownMenu span').on('click', function() {
                $('#dropdownMenuButton').html($(this).text());
            });

#dropdownMenuButton {
  border: solid 1px black;
  background-color: white;
  box-shadow: none;
  width: 30vw;
  text-align:left;
}

#dropdownMenu {
  height: 50vh;
  overflow: hidden;
  overflow-y: auto;
  transform: translate3d(0px, 38px, 0px)!important;
  width: 30vw;
}





  bootstrap dropdown
  



  
    
    
      Avrora
      Irlbach
      Laura
      Lola 
      Syrena
      Thea
      Anne
      Bebe
      Camilla
      Emma
      Katy
      Nelli
      Winter
      Aeolus
      Amorina
      Melina
      Nieva
      Nora
      Rush
      Alex
      Blue J
      Corker
      DaCapo
      Freedom
      Golden
      Montana
      Moonshadow
      Phoebe
      Ra
      Rigel
      Santuzza
      Sorccerer
      Stiletto
      Tony
      Wasabi

user_11454883 · Answer

you need to fix it on the right side with absolute position

#dropdownMenuButton {
    border: solid 1px black;
    background-color: white;
    box-shadow: none;
    width: 30vw;
    text-align: left;

    /* add relative position */
    position: relative;

}
#dropdownMenuButton::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;

    /* add these code */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

user_4398966 · Answer

adding the following:

.dropdown-toggle::after{ margin-top:1vw; float:right; }

$('#dropdownMenu span').on('click', function() {
                $('#dropdownMenuButton').html($(this).text());
            });

#dropdownMenuButton {
  border: solid 1px black;
  background-color: white;
  box-shadow: none;
  width: 30vw;
  text-align:left;
}

#dropdownMenu {
  height: 50vh;
  overflow: hidden;
  overflow-y: auto;
  transform: translate3d(0px, 38px, 0px)!important;
  width: 30vw;
}

.dropdown-toggle::after{
    margin-top:1vw;
    float:right;
}





  bootstrap dropdown
  



  
    
    
      Avrora
      Irlbach
      Laura
      Lola 
      Syrena
      Thea
      Anne
      Bebe
      Camilla
      Emma
      Katy
      Nelli
      Winter
      Aeolus
      Amorina
      Melina
      Nieva
      Nora
      Rush
      Alex
      Blue J
      Corker
      DaCapo
      Freedom
      Golden
      Montana
      Moonshadow
      Phoebe
      Ra
      Rigel
      Santuzza
      Sorccerer
      Stiletto
      Tony
      Wasabi

How to position caret in bootstrap dropdown

2 Answers