Create a gist now

Instantly share code, notes, and snippets.

Bootstrap styling for jQuery UI autocomplete
.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-hover, &.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;
}
}
}
@tomchentw

This works!!! Thank U!!!!!!!!!!!

@daz
Owner
daz commented Mar 25, 2012

I didn't write this, just fixed the white space. Thank @kevindavis !

@pau
pau commented Jun 21, 2012

Thank you!

@atomical
atomical commented Jul 8, 2012

Thanks!

@Paxa
Paxa commented Nov 28, 2012

Its scss, not sass

@nanakoe
nanakoe commented Jan 26, 2013

.ui-widget-content .ui-state-focus {} instead of &.ui-state-hover, &.ui-state-active{} worked for me (outside of the .ui-autocomplete)

@gracegimon

Awesome :D thanks.

@nTraum
nTraum commented Nov 3, 2013

Is this Bootstrap 3 or 2?

@sjemli
sjemli commented Jan 29, 2014

where should we put this code?

@JohnMcAvinue

+1 @nanakoe on Bootstrap 3

@kkiran3
kkiran3 commented Jan 5, 2015

It works! Thank you

@lrz-hal
lrz-hal commented Mar 3, 2015

Awesome!!! +1 @nanakoe

@educatto

Salvou minha vida. Tenks!!!!

@mvrmoreira

Thanks!!

@alexzabolotny

thanks. it looks great.

@kochol
kochol commented May 6, 2015

Thank you for sharing this

@bmwe30is
bmwe30is commented May 8, 2015

Thanks for sharing! Works great!!

@mcbsys
mcbsys commented Jun 10, 2015

I'm still using Bootstrap 2 but now with Rails 4.2.1, jQuery-UI 1.11.4, and rails-jquery-autocomplete 1.0.0, not rails3-jquery-autocomplete. The menu items are no longer wrapped in "a" tags, and the active item gets a ui-state-focus class. Seems to be working correctly under Firefox after changing the last two blocks as follows:

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

  &.ui-state-focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none;
  }
}
@RatanPaul

I am getting 'The entity name must immediately follow the '&' in the entity reference.' error.

@Yugan-Naik

Works beautifully ... Thank you sir

@paseto
paseto commented Oct 28, 2015

Did not work for me, sallipa solution neither.
.ui-state-focus was missing.
Working style: https://gist.github.com/paseto/5b0f626bbf4ccdcc0b09

@austinarchibald

@paseto I can't get yours to work for me either. Still stuck on the default css except for the width seemed to have worked. Otherwise everything is the ugly default css. CSS is so confusing sometimes.

@vlademiro

Thanks a lot

@lowellmower

👍 thanks for this

@correalucas

Thanks! Helped a lot.

@debugmodedotnet

For me selection is not working ! any help ?

@takatter

Thanks @mcbsys. Your patch works fine.
Bootstrap3 + rails-jquery-autocomplete + Rails 4.2

@mattymil
mattymil commented Feb 9, 2016

This is good. Saved me allot of work; however, I needed to bump .ui-autocomplete Z-index way up to get the drop down to show.

@arturaum

@mcbsys you style correction works with Bootstrap3 + rails-jquery-autocomplete + Rails 4.2 too

Thanks to all!

@NrBT
NrBT commented Jun 3, 2016 edited

+1 @mcbsys

@avaldesa

thanks!!!!!!!

@yrxwin
yrxwin commented Jul 30, 2016

Thanks! for the last two blocks in .ui-autocomplete, here is my modification which works in my local Chrome

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

    .ui-state-active, .ui-state-hover {
      color: #ffffff;
      text-decoration: none;
      background-color: #0088cc;
      border-radius: 0;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      background-image: none;
    }

  }
@shoesandsocks

@yrxwin, your modification to the original is looking good here, thanks!

@webhacking

Thank you!

@sheikhasadmuneer

Thanks !!! 👍

@rolandszpond

Minimal, out-of-the-box that mimics the drop-down styling while using Less...

.ui-autocomplete {
	.dropdown-menu;
}
.ui-state-hover,
.ui-state-active,
.ui-state-focus {
	a {
		text-decoration: none;
		color: @dropdown-link-hover-color;
		background-color: @dropdown-link-hover-bg;
		cursor: pointer;
	}
}
@lmcdougall

Thanks!

This kind of works on my project. The selected item it get draw outside of the box and once the selection is made the string
stays on the screen. (rails 4.2.6, botstrap, simple_form)
Any suggestions ?

@em77
em77 commented Dec 23, 2016 edited

None of these seem to work as intended with the newest version of jquery-ui (1.12.1). They work with 1.11.4 though. If you're using rails, you can see how your gem matches up with the jquery-ui version here: https://github.com/jquery-ui-rails/jquery-ui-rails/blob/master/VERSIONS.md

@arturaum

@em77 is right

Now this combination of selectors works (for me at least):

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

    &:hover, &.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;
    }
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment