https://discord.gg/botpress logo
Join Discord
Powered by
Css styling for dropdown choices
# 🤝help
a
Hey guys 😄 for all the css experts out there: i was wondering if anybody knows how to change the styling of dropdowns like the one in the picture, i managed to do it some time ago but have had no luck this time trying different things this is the link of the stylesheet https://webchat-styler-css.botpress.app/prod/code/0436c36d-2a82-4a5b-aef6-7462a66fbfca/v76724/style.css Also was wondering how to make the choices overlap everything else, when the dropdown appears as the first message the top choices are not seen (second picture)
b
Making the choices overlap everything else is not possible, this would mean breaking out of the iframe. In a little chat window a dropdown, or in this case a "flow up?" is not a very good idea from a UX standpoint.
a
is that the name of the class where bp's dropdown is? "custom-select"?
b
Sorry, one moment. I will get back to you.
This is the drop-down:
Copy code
<  <div class=" css-b62m3t-container">
    <span id="react-select-2-live-region" class="css-7pg0cj-a11yText">
    </span>
    <span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"></span>
    <div class=" css-1s2u09g-control">
      <div class=" css-1d8n9bt">
        <div class=" css-14el2xx-placeholder" id="react-select-2-placeholder">Select...</div>
        <div class=" css-ackcql" data-value="">
          <input class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-controls="react-select-2-listbox" aria-owns="react-select-2-listbox" role="combobox" aria-describedby="react-select-2-placeholder" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;">
        </div>
      </div>
      <div class=" css-1wy0on6">
        <span class=" css-1okebmr-indicatorSeparator"></span>
        <div class=" css-tlfecz-indicatorContainer" aria-hidden="true">
          <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg">
            <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
The select button than adds this list box:
Copy code
<div class=" css-1w9j89e-menu" id="react-select-2-listbox">
  <div class=" css-11unzgr">
    <div class=" css-1n7v3ny-option" aria-disabled="false" id="react-select-2-option-0" tabindex="-1">select 1</div>
    <div class=" css-yt9ioa-option" aria-disabled="false" id="react-select-2-option-1" tabindex="-1">select 2</div>
    <div class=" css-yt9ioa-option" aria-disabled="false" id="react-select-2-option-2" tabindex="-1">select 3</div><
    div class=" css-yt9ioa-option" aria-disabled="false" id="react-select-2-option-3" tabindex="-1">select 4</div>
    <div class=" css-yt9ioa-option" aria-disabled="false" id="react-select-2-option-4" tabindex="-1">select 5</div>
    <div class=" css-yt9ioa-option" aria-disabled="false" id="react-select-2-option-5" tabindex="-1">select 6</div>
    <div class=" css-yt9ioa-option" aria-disabled="false" id="react-select-2-option-6" tabindex="-1">select 7</div>
  </div>
</div>
a
i tried adding
Copy code
css
.css-b62m3t-container {
  background-color: purple;
}

.css-yt9ioa-option {
  color: white;
}
but there was no change
b
Try:
Copy code
#react-select-2-placeholder div{
}
#react-select-2-listbox div div{
}
Easiest way to do styling is open the page in chrome use inspect (Developer Tools) and change style see what happens.
a
thank you for your help so far but it didn't work 🥲
b
I am sorry, I just realized these are dynamically given an id and class.
I tested and you can use: div.bpw-bubble-dropdown > div > div > div > div > div > div{ color: #FF0000; background-color: #000000; } /* select */ div.bpw-bubble-dropdown > div > div > div > div > div > div > div > div > input{ color: #FFFFFF !important; }
!important is used to overrule inline styles
c
@bright-magazine-792 hey Rohan! Is this something we can add to our doc? Any help is appreciated here. thanks
Thanks 😉 ! You're on top of everything
b
Styling in general is a big part of the questions. Besides most people don't realize they have to past the new styling into the Integrations tab everytime they change something in the https://styler.botpress.app/
Not @adorable-whale-86571 of course 😉
a
it worked thank you, do you by any chance know how to change the color of the choice when you hover over it? as in the picture it's turning white when hovering, i fixed something else playing with the colors for now, but would be great to know
b
div.bpw-bubble-dropdown > div > div > div > div > div > div > div > div:hover{ color: #FFFFFF !important; background-color: #0000FF; }
c
Marking this as solved! Thanks @bitter-magazine-8114 ❤️
m
Was the the best approach using the multiple > approach? seems to be quite fragile, if any div is removed it breaks, plus how do you know what each div layer refers to?
b
True, but all the divs are dynamically build and named, meaning the targeting could only start at the first class or id that stays the same. Using complex targeting would have made it more difficult for now, but if you're interested: https://web-crunch.com/posts/advanced-css-selectors-never-knew
m
Righto then I guess your solution is the workaround for this 👍
b
@jolly-policeman-82775
j
how can you disable it ?
15 Views
PreviousNext
Powered by