Bootstrap dropdown button not working

Question

I have a form using a dropdown button in a input group that is placed in the page as a polymer custom html tag. It works fine in this fiddle, but not in my live demo.

from index.html:

<video class="background" autoplay loop poster="/static/video/video.jpg">
    <source src="/static/video/video.webm" type="video/webm">
    <source src="/static/video/video.mp4" type="video/mp4">
    <source src="/static/video/video.ogv" type="video/ogv">
</video>
<div class="index-cta">
    <div class="row-">
        <div class="col-md-4">
            <!-- TMPL_VAR instance_name -->
        </div>
        <div class="col-md-8">
            <h1>Real Estate</h1>
            <p>
                <em>you're one click away from thousands of homes</em><br>
                <a class="btn btn-link btn-outline btn-inverse" href="/leads/buy"><span>Buying a home?</span></a>
                <a class="btn btn-link btn-outline btn-inverse" href="/leads/sell"><span>Selling a home?</span></a>
                <a class="btn btn-link btn-outline btn-inverse" href="/leads/cma"><span>What's my home worth?</span></a>
            </p>
            <search-form></search-form>
        </div>
    </div>
</div>

from search-form.html

<!-- Defines element markup -->
<dom-module id="search-form">
<template>
    <form id="search" method="get" action="/property/search">
    <div class="input-group">
        <div class="input-group-btn">
            <button id="#search-type" type="button" class="btn primary dropdown-toggle" data-toggle="dropdown">
                Search By 
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a data-name="city" data-label="city">City</a></li>
                <li><a data-name="zip" data-label="zip">Zip Code</a></li>
                <li><a data-name="mls" data-label="mls">MLS Number</a></li>
            </ul>
        </div>
        <input id="#input-tag" class="form-control" type="text" name="" value="">
        <div class="input-group-btn">
            <button type="submit" class="btn"><i class="fa fa-search"></i></button>
        </div>
    </div>
    </form>
</template>

<script>
/********************************
/ SEARCH TYPE BUTTON
/*******************************/
$(function () {
    var caret = ' <span class="caret"></span>';

    function searchSelect() {
        $('.dropdown-menu > li > a').on("click", function() {
            $('#search-type').html($(this).text() + caret);
            $('#input-tag').attr('placeholder', $(this).data('label'));
            $('#input-tag').attr('name', $(this).data('name'));
        });
    }searchSelect();
}); 

Polymer({
        is: 'search-form',
        created: function() {},
        ready: function() {},
        attached: function() {},
        detached: function() {},
        attributeChanged: function(name, type) {}
}); 
</script>
</dom-module>

css for the involved elements:

.background { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(/static/video/video.jpg) no-repeat;
    background-size: cover; 
}

.index-cta {
    background-color: rgba(255,255,255,.5);
    display: block;
    position: absolute;
    padding: 20px;
    overflow: visible;
    width: 100%;
}

jquery:

$(document).ready(function() {
    $('.index-cta').css("top", (($(window).height() - $('.index-cta').height()) / 4) - $('footer').height()  + "px");
    $('.index-cta').css("left", ( $(window).width() - $('.index-cta').width()) /   + "px");
});

I'm totally busted on this one as I am able to create a working demo, but when put in the rest of the site, if fails.

Answer 1

your dropdown is working . Issue is with some CSS styles are overriding the default css styles of bootstrap dropdown As you are using LESS , i am unable to find the file. so just providing the screenshot of the styles that are to removed.