cdenby pro asked 6 years ago

I have this issue with the autocomplete having a barely visible background and transparent text for much of the drop down that is supposed to be in place. Here is an 11 sec video of the issue: Please advise

Marta Wierzbicka staff answered 6 years ago

Hi, could you send me your file with this issue to Best, Marta

cdenby pro answered 6 years ago

I think the jquery-ui autocomplete is not playing nicely with the other styling that MDB adds on. What I found was this fragment in jquery-ui.css:866
.ui-widget-content {
    border: 1px solid #7e7783;
    background: #3d3644 url(images/ui-bg_gloss-wave_30_3d3644_500x100.png) 50% top repeat-x;
    color: #ffffff;
But you can see that the image (which in this case is a dark wavy thing) is not repeated vertically. So it seems that jquery-ui expects a max-height on the widget, but perhaps mdb expands it(?). So what I've done is added this into my css: .ui-widget-content.ui-autocomplete.ui-menu {background-color: #3d3644 !important;} This way the background of the popup autocomplete panel hides the webpage material underneath and the white text of the autocomplete is visible. If this is a design issue with MDB, perhaps it could get looked at...

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No