0
私はかなりウェブプログラミングに新しいです。私は単純なSelect2ピッカーを作成しようとしていて、その隣にボタンがあります。私が気にしている問題は、「クリア」ボタンと「すべて」ボタンをselect2ピッカーの上部に均等に合わせる方法を理解しているようです。HTML Select2アライメントボタン付きアライメント
私は、マルチピッカーに選択肢を追加するにつれて、垂直方向に伸びるので、私はトップと揃えていると言います。だから私は、ボタンを中央にピッカーと整列させようとしているのですが、何も選択されていないか、ただ一つ選択されています。私はVelocityのテンプレートコードも使っていますが、私はかなり確信しています。フォーマットに使用されるすべてのAUIクラスは、Atlassian Jiraのものです。ここでjsbin.com
の私
http://jsbin.com/lejixo/edit?html,output
JSビンへのリンク任意の提案がある??
<html>
<head>
<!-- External dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-experimental.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui.css" />
<link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui-experimental.css" />
<!--/External dependencies -->
</head>
<body>
<section id="content" role="main">
<div class="aui-page-panel">
<div class="aui-page-panel-inner">
<section class="aui-page-panel-content">
<form id="admin" class="aui" action="" method="POST" enctype="multipart/form-data">
<div class="aui-group">
<div class="aui-item">
<div class="field-group">
<label for="baseline">Baseline(s):</label>
<!-- Trigger -->
<script type="text/javascript">
AJS.$(function() {
var $exampleMulti = AJS.$("#baseline").auiSelect2({
placeholder: "All"
});
AJS.$(".js-programmatic-multi-set-val").on("click", function() {
$exampleMulti.val(["CA", "AL"]).trigger("change");
});
AJS.$(".js-programmatic-multi-clear").on("click", function() {
$exampleMulti.val(null).trigger("change");
});
});
</script>
<script>
console.log($baselineD.class.name);
</script>
<div class="input-group">
<select id="baseline" name="baseline" style="width: 170px" value="${baseline}" multiple="">
#foreach($baseline in $instance.getAllBaselines())
<option value="${baseline}">$baseline</option>
#end
#set ($listType = "java.util.ArrayList")
#if($baselineD.class.name == $listType)
#foreach($bl in ${baselineD})
#if(${bl})
<option selected="selected">${bl}</option>
#end
#end
#else
#if ($baselineD)
<option selected="selected">${baselineD}</option>
#end
#end
</select>
<div class="aui-buttons input-group-btn" role="group">
<button type="button" class="aui-button js-programmatic-multi-set-val btn btn-default">
All
</button>
<button type="button" class="aui-button js-programmatic-multi-clear btn btn-default">
Clear
</button>
</div>
</div>
</div>
<div class="field-group">
<label for="priority">Priority:</label>
<!-- Trigger -->
<script type="text/javascript">
AJS.$(function() {
AJS.$("#priority3").auiSelect2({
placeholder: "All"
});
});
</script>
<select id="priority3" name="priority" style="width: 170px" value="${priority}">
#if(${priorityD})
<option selected="selected">${priorityD}</option>
#end
##<option value="All">All</option>
#foreach($priority in $instance.getPriorities())
<option value="${priority}">$priority</option>
#end
</select>
</div>
</div>
</div>
</form>
</section>
</div>
</div>
</section>
</body>
</html>
ありがとう@kervon Ryanは説明したように機能しました。私はselect2ボックスを中心にしないように値を少し変更しました。私はちょうどそれがselect2領域の上部を固定することを望んでいました。 –