CODEWITHSUNDEEP
jquerycssjquery-uijquery-widgets
robinyapockets
robinyapockets

Reputation: 393

How to properly override Jquery UI Styling

I'm using jquery autocomplete (+ jquery-ui.min.css), and I'm having issues with the styling. Most previous answers conclude with adding !important to the css, which I'd like to avoid.

Simple code (Autocomplete connects with the search-input id):

<div class="user-search">
  <form>
    <%= text_field_tag :user, params[:query], id: "search-input" %>
  </form>
</div>

However, viewing the dev tools, the this ul class, associated with autocomplete, gets pushed out of the containing div, just inside the body tag. 

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content">

Is there a better way to override jquery ui styling?

Thanks!

Upvotes: 0

Views: 1253

Answers (2)

blgt
blgt

Reputation: 8215

It looks like you're concerned about the menu's containment, so you're looking for is the appendTo option. From the documentation:

the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.

So, to change that to the containing form element:

$("#search-input").autocomplete({
    // other options...
    appendTo: ".user-search > form"
});

For the scenario described there's no need to mess around with the CSS. Use caution if you do

ref. the list of options: http://api.jqueryui.com/autocomplete/

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

Just use this selector:

.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content {
  /* Overridden Styles */
}

Upvotes: 1

Related Questions