Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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 comment has been minimized.

Show comment Hide comment
@tomchentw

tomchentw Mar 25, 2012

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

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

@daz

This comment has been minimized.

Show comment Hide comment
@daz

daz Mar 25, 2012

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

Owner

daz commented Mar 25, 2012

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

@pau

This comment has been minimized.

Show comment Hide comment
@pau

pau Jun 21, 2012

Thank you!

pau commented Jun 21, 2012

Thank you!

@atomical

This comment has been minimized.

Show comment Hide comment
@atomical

atomical Jul 8, 2012

Thanks!

atomical commented Jul 8, 2012

Thanks!

@Paxa

This comment has been minimized.

Show comment Hide comment
@Paxa

Paxa Nov 28, 2012

Its scss, not sass

Paxa commented Nov 28, 2012

Its scss, not sass

@nanakoe

This comment has been minimized.

Show comment Hide comment
@nanakoe

nanakoe 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)

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)

@quentindemetz

This comment has been minimized.

Show comment Hide comment
@quentindemetz

quentindemetz Oct 20, 2013

@gracegimon

This comment has been minimized.

Show comment Hide comment
@gracegimon

gracegimon Nov 1, 2013

Awesome :D thanks.

Awesome :D thanks.

@nTraum

This comment has been minimized.

Show comment Hide comment
@nTraum

nTraum Nov 3, 2013

Is this Bootstrap 3 or 2?

nTraum commented Nov 3, 2013

Is this Bootstrap 3 or 2?

@sjemli

This comment has been minimized.

Show comment Hide comment
@sjemli

sjemli Jan 29, 2014

where should we put this code?

sjemli commented Jan 29, 2014

where should we put this code?

@JohnMcAvinue

This comment has been minimized.

Show comment Hide comment
@JohnMcAvinue

JohnMcAvinue May 7, 2014

+1 @nanakoe on Bootstrap 3

+1 @nanakoe on Bootstrap 3

@salilpa

This comment has been minimized.

Show comment Hide comment
@kkiran3

This comment has been minimized.

Show comment Hide comment
@kkiran3

kkiran3 Jan 5, 2015

It works! Thank you

kkiran3 commented Jan 5, 2015

It works! Thank you

@lrz-hal

This comment has been minimized.

Show comment Hide comment
@lrz-hal

lrz-hal Mar 3, 2015

Awesome!!! +1 @nanakoe

lrz-hal commented Mar 3, 2015

Awesome!!! +1 @nanakoe

@educatto

This comment has been minimized.

Show comment Hide comment
@educatto

educatto Mar 15, 2015

Salvou minha vida. Tenks!!!!

Salvou minha vida. Tenks!!!!

@mvrmoreira

This comment has been minimized.

Show comment Hide comment
@mvrmoreira

mvrmoreira Mar 22, 2015

Thanks!!

Thanks!!

@alexzabolotny

This comment has been minimized.

Show comment Hide comment
@alexzabolotny

alexzabolotny Mar 26, 2015

thanks. it looks great.

thanks. it looks great.

@yifeiwu

This comment has been minimized.

Show comment Hide comment
@yifeiwu

yifeiwu May 4, 2015

@kochol

This comment has been minimized.

Show comment Hide comment
@kochol

kochol May 6, 2015

Thank you for sharing this

kochol commented May 6, 2015

Thank you for sharing this

@bmwe30is

This comment has been minimized.

Show comment Hide comment
@bmwe30is

bmwe30is May 8, 2015

Thanks for sharing! Works great!!

bmwe30is commented May 8, 2015

Thanks for sharing! Works great!!

@mcbsys

This comment has been minimized.

Show comment Hide comment
@mcbsys

mcbsys 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;
  }
}

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

This comment has been minimized.

Show comment Hide comment
@RatanPaul

RatanPaul Aug 21, 2015

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

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

@Yugan-Naik

This comment has been minimized.

Show comment Hide comment
@Yugan-Naik

Yugan-Naik Sep 16, 2015

Works beautifully ... Thank you sir

Works beautifully ... Thank you sir

@paseto

This comment has been minimized.

Show comment Hide comment
@paseto

paseto Oct 28, 2015

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

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

This comment has been minimized.

Show comment Hide comment
@austinarchibald

austinarchibald Nov 6, 2015

@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.

@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

This comment has been minimized.

Show comment Hide comment
@vlademiro

vlademiro Nov 11, 2015

Thanks a lot

Thanks a lot

@lowellmower

This comment has been minimized.

Show comment Hide comment
@lowellmower

lowellmower Nov 16, 2015

👍 thanks for this

👍 thanks for this

@correalucas

This comment has been minimized.

Show comment Hide comment
@correalucas

correalucas Dec 7, 2015

Thanks! Helped a lot.

Thanks! Helped a lot.

@debugmodedotnet

This comment has been minimized.

Show comment Hide comment
@debugmodedotnet

debugmodedotnet Jan 3, 2016

For me selection is not working ! any help ?

For me selection is not working ! any help ?

@takatter

This comment has been minimized.

Show comment Hide comment
@takatter

takatter Jan 31, 2016

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

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

@mattymil

This comment has been minimized.

Show comment Hide comment
@mattymil

mattymil 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.

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

This comment has been minimized.

Show comment Hide comment
@arturaum

arturaum Mar 14, 2016

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

Thanks to all!

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

Thanks to all!

@BillyRuffian

This comment has been minimized.

Show comment Hide comment
@BillyRuffian

BillyRuffian Jun 3, 2016

+1 @mcbsys

BillyRuffian commented Jun 3, 2016

+1 @mcbsys

@avaldesa

This comment has been minimized.

Show comment Hide comment
@avaldesa

avaldesa Jul 29, 2016

thanks!!!!!!!

thanks!!!!!!!

@yrxwin

This comment has been minimized.

Show comment Hide comment
@yrxwin

yrxwin 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;
    }

  }

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

This comment has been minimized.

Show comment Hide comment
@shoesandsocks

shoesandsocks Sep 10, 2016

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

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

@webhacking

This comment has been minimized.

Show comment Hide comment
@webhacking

webhacking Sep 23, 2016

Thank you!

Thank you!

@sheikhasadmuneer

This comment has been minimized.

Show comment Hide comment
@sheikhasadmuneer

sheikhasadmuneer Oct 31, 2016

Thanks !!! 👍

Thanks !!! 👍

@rolandszpond

This comment has been minimized.

Show comment Hide comment
@rolandszpond

rolandszpond Nov 28, 2016

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;
	}
}

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

This comment has been minimized.

Show comment Hide comment
@lmcdougall

lmcdougall Dec 12, 2016

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 ?

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

This comment has been minimized.

Show comment Hide comment
@em77

em77 Dec 23, 2016

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

em77 commented Dec 23, 2016

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

This comment has been minimized.

Show comment Hide comment
@arturaum

arturaum Jan 21, 2017

@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;
    }
  }

@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;
    }
  }
@bbonamin

This comment has been minimized.

Show comment Hide comment
@bbonamin

bbonamin Dec 2, 2017

On:

gem 'jquery-rails', '4.3.1'
gem 'jquery-ui-rails', '5.0.5' # which installs jquery-ui 1.11.4

The following worked for me perfectly:

.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 {
    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;
    }
  }
}

.ui-helper-hidden-accessible { display:none; } //Hide that pesky bottom message

bbonamin commented Dec 2, 2017

On:

gem 'jquery-rails', '4.3.1'
gem 'jquery-ui-rails', '5.0.5' # which installs jquery-ui 1.11.4

The following worked for me perfectly:

.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 {
    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;
    }
  }
}

.ui-helper-hidden-accessible { display:none; } //Hide that pesky bottom message
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment