How to move a CSS Element?

[ArtcoInc]

I had asked this question in another thread, but thought it better to post it again here, where hopefully more people may see it .

I am trying to implement a twitter typeahead feature in my search box. The problem is, when the user starts to type a search term, the typeahead drop-down 'drops down', but the left edge is aligned with the left edge of the Search Box. This makes the typeahead drop-down extend way off the right edge of the screen.

(the right edge of the black NavBar is the right edge of the page).

Initially, the width (ie: colored portion) of the typeahead drop-down was the same width as the Search Box (with the text overflowing into space), but I was able to widen it with CSS

.typeahead.dropdown-menu {
  width: 500px;
}

I think I've identified *what* I need to change ... I just don't know *where* to change it. I just need to apply a CSS definition to shift the dropdown-menu   

left: -290px;

While inspecting the elements, I see that the generated HTML code is:

<ul class="typeahead dropdown-menu" style="top: 34px; left: 0px; display: none;">

(See #1 below)

When I search for where this line of code is generated, I find that;

"<ul class="typeahead dropdown-menu" 

is only listed once in all of the code, and that's in bootstrap3-typeahead.min.js

But, the style= part of the code is not in there (not that I know anything about javascript ...)

So, I try to add a CSS definition to user.css (see #2 above)

However, it is overridden by the inline element (see #3 above)

If I use the inspect element tool to modify #3, the dropdown-menu moves to where I want it ...

So, my question is .... how and/or where do I override the inline style for the element, so I can change it?

TIA

Malcolm

[burt]

You can override ANY .css with a later declaration.

With this in mind, let us assume that this .css is loaded prior to the core file user.css

You would in user.css, write;

.twitter-typeahead .dropdown-menu {
  left: auto !important;
  right: 0 !important;
}

You can play with that appropriately and it might do the trick for you.

[ArtcoInc]

Thank you @burt  ... I *just* found the !important rule, and it does the trick

left: -290px !important;

Thanks again.

Malcolm