for z-index to work

you need a position that isn’t static (the default)

 

ex:

 

position: relative;

z-index: 100;

Advertisements
for z-index to work

so. you need to make the owl carousel fade in and out instead of swiping.

THIS IS NOT BUILT IN TO A STANDARD OWL-CAROUSEL FEATURE.

Find the animation you want in the animate.css library. Choose the in and out versions of the animation you want.

Add a property name to your slider describing the transition.

transitionStyle :"Fade",
Rename your animation in this style:
owl-Fade-in, owl-Fade-out

Big thanks to:

http://www.landmarkmlp.com/js-plugin/owl.carousel/demos/transitions.html

 

so. you need to make the owl carousel fade in and out instead of swiping.

i actually used CSS calc() in a real thing

so the input box has padding so the text inside of it isn’t right up against the box. in order to get the width of the dropdown menu to match the width of the input bar exactly, you have to add padding.

but when you add padding to the dropdown menu, the highlight doesn’t go all the way across.

SO you use calc(100% + 30px) to account for the 15px on either side of the input. BOOM.

i actually used CSS calc() in a real thing