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
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
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
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?