我有一個表單,它使用位於頁面中的輸入組中的下拉按鈕作爲聚合物自定義html標記。它在這fiddle,但不是在我的live demo正常工作。引導程序下拉按鈕不起作用
從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>
從搜索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爲所涉及的元素:
.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");
});
因爲我可以創建一個工作演示,但是當放在網站的其他部分,如果失敗,我完全被破壞了。
我使用較少。感謝截圖 –
完全解決了這個問題。該css用於控制畫布外的菜單,並且我簡單地將菜單類添加爲css目標的一部分,並且全部都是正確的 –