kristianmandrup / gmaps-autocomplete-rails

Google Maps v3 search with jQuery UI Autocomplete, ready for use with Rails asset pipeline
MIT License
73 stars 35 forks source link

My autocomplete list is showing transparently in the form #14

Closed p4p3r1n0 closed 8 years ago

p4p3r1n0 commented 9 years ago

Do you have any idea, why or where I should look for a fix ?

screenshot 2015-05-24 12 27 53

FrankHald commented 8 years ago

I have the same problem, did you fix it and how?

kristianmandrup commented 8 years ago

That looks like a simple CSS styling issue to me.

FrankHald commented 8 years ago

My application.scss looks like this:

@import "bootstrap-sprockets";
@import "_bootstrap";
@import "lightbox-bootstrap";

.nav-justified > li > a, .nav-tabs.nav-justified > li > a {
  color: black;
  text-decoration: none;
}

a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: green;
  text-decoration: none;
}

How can I solve this?

FrankHald commented 8 years ago

It was a CSS styling issue, and I added the following to fix it:

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  _width: 160px;
  padding: 4px 0;
  margin: 2px 0 0 0;
  list-style: none;
  background-color: #ffffff;
  border-color: #ccc;
  border-color: rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;

  .ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;

    &.ui-state-focus, &.ui-state-active {
      color: #ffffff;
      text-decoration: none;
      background-color: #0088cc;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      background-image: none;
    }
  }
}
kristianmandrup commented 8 years ago

Thanks @FrankHald, if this is a common issue, feel free to make a PR to the README to include the CSS fix as a recipe or troubleshooting section. Cheers!

kristianmandrup commented 8 years ago

I added note to README on this issue