jQuery UI Autocomplete - Custom style when we have jQuery UI Theme style sheet referenced

Question

I am using jQuery UI Autocomplate plugin as it is on the first example. I also have jQuery UI Theme style sheet referenced for other plugins.

This is the input I am using with that:

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
    outline:none;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

Here is my situation:

As the above div element serves as an input element (on the style perspective), the autocomplete list looks a little awkward because it sets itself for the input element.

I dug the source code which jQuery UI is creating for the autocomplete function and there is ui-autocomplete style class but as I said but I couldn't figure auto what should I override.

Any thoughts?

UPDATE:

Here is the jsfiddle sample:

http://jsfiddle.net/tugberk/YxRYe/4/

So you're trying to edit the UI style of the drop down for an auto-complete widget? Where are you actually making the UI widget? — SuperTron
– SuperTron, Commented Dec 2, 2011 at 19:39
Well, what class are you applying the "autocomplete" to? Something like: $( "#tags" ).autocomplete({source: availableTags}); Are you doing that on the "paddedInput" class? — SuperTron
– SuperTron, Commented Dec 2, 2011 at 20:01
@SuperTron no, I am just testing it for now and this is the only input element inside the DOM. So, I use element selector: $("input[type=text]" ).autocomplete({source: availableTags}); — tugberk
– tugberk, Commented Dec 2, 2011 at 20:31

Mehdi Hadjar · Accepted Answer · 2011-12-03 03:12:50Z

1

If you want to overwrite your style, you can use !important keyword as this code

div.paddedInput input {
    border: 0px!important;
    width: 100%;
    outline:none;
}

answered Dec 3, 2011 at 3:12

Mehdi Hadjar

67511 silver badges30 bronze badges

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

1 Comment

tugberk Over a year ago

you didn't get me. Here is a sample of mine. jsfiddle.net/tugberk/YxRYe/4

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

0

I guess the main question here is why you would have the outer div element serve as an input element from a style perspective in the first place.

If this is not a requirement, just do this. Otherwise we'll have to use JS to set the width of the dropdown to the width of the div and adjust the position of the dropdown. A rather hacky solution i.m.o. I am not aware of a way to specify what element the dropdown should attach to since this is rarely what you want.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 14, 2011 at 12:00

Benny Johansson

7716 silver badges18 bronze badges

Collectives™ on Stack Overflow

jQuery UI Autocomplete - Custom style when we have jQuery UI Theme style sheet referenced

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related