CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
tugberk
tugberk

Reputation: 58454

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

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/

Upvotes: 1

Views: 1179

Answers (2)

Benny Johansson
Benny Johansson

Reputation: 771

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.

Upvotes: 0

Mehdi Hadjar
Mehdi Hadjar

Reputation: 675

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

Upvotes: 1

Related Questions