How to properly override Jquery UI Styling

Question

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!

The usual way to manage the widget's position is through its position option, not via CSS. Can you add more details about your particular use case? The question as it stands a bit vague — blgt
– blgt, Commented Sep 21, 2015 at 11:29
Thanks @blgt I've updated the question to include the html. That's good to know. Do you suggest to override most the styling in the js file with options? — robinyapockets
– robinyapockets, Commented Sep 21, 2015 at 11:39

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-21 11:02:11Z

1

Just use this selector:

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

answered Sep 21, 2015 at 11:02

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

robinyapockets Over a year ago

Thanks @PreveenKumar. That works for certain styles like background-color, however others, like position, top, width are all overridden by generated inline styles. Might you have suggestions?

Praveen Kumar Purushothaman Over a year ago

Ah okay. I understand the issue now.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 21, 2015 at 11:46

blgt

8,2151 gold badge27 silver badges29 bronze badges

1 Comment

robinyapockets Over a year ago

Thats it! Thanks! Also found a similar good answer here stackoverflow.com/a/20817840/2956085

Collectives™ on Stack Overflow

How to properly override Jquery UI Styling

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related