Jump to content
Latest News: (loading..)

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


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Frozen" release 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 current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

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

left: -290px !important;

Thanks again.

Malcolm


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Frozen" release here

Share this post


Link to post
Share on other sites

×