Jump to content

Archived

This topic is now archived and is closed to further replies.

ArtcoInc

How to move a CSS Element?

Recommended Posts

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.

59bc0b4aa4b2d_ScreenCapture-09-14-17.JPG.356dde20e784e1e488440955a2c363bd.JPG

(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)

59bc0c34933d8_ScreenCapture-09-15-17.JPG.3c4481169eedcb4181af3896060c68ff.JPG

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


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

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.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

×