<% available_tag_id = "available_#{tag_id}" %>
<% selected_tag_id = "selected_#{tag_id}" %>
-<table class="query-columns">
- <tr>
- <td style="padding-left:0">
+<span class="query-columns">
+ <span>
<%= label_tag available_tag_id, l(:description_available_columns) %>
- <br />
<%= select_tag 'available_columns',
options_for_select(query_available_inline_columns_options(query)),
:id => available_tag_id,
:multiple => true, :size => 10, :style => "width:150px",
:ondblclick => "moveOptions(this.form.#{available_tag_id}, this.form.#{selected_tag_id});" %>
- </td>
- <td class="buttons">
+ </span>
+ <span class="buttons">
<input type="button" value="→"
- onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);" /><br />
+ onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);" />
<input type="button" value="←"
onclick="moveOptions(this.form.<%= selected_tag_id %>, this.form.<%= available_tag_id %>);" />
- </td>
- <td>
+ </span>
+ <span>
<%= label_tag selected_tag_id, l(:description_selected_columns) %>
- <br />
<%= select_tag tag_name,
options_for_select(query_selected_inline_columns_options(query)),
:id => selected_tag_id,
:multiple => true, :size => 10, :style => "width:150px",
:ondblclick => "moveOptions(this.form.#{selected_tag_id}, this.form.#{available_tag_id});" %>
- </td>
- <td class="buttons">
- <input type="button" value="⇈" onclick="moveOptionTop(this.form.<%= selected_tag_id %>);" /><br />
- <input type="button" value="↑" onclick="moveOptionUp(this.form.<%= selected_tag_id %>);" /><br />
- <input type="button" value="↓" onclick="moveOptionDown(this.form.<%= selected_tag_id %>);" /><br />
+ </span>
+ <span class="buttons">
+ <input type="button" value="⇈" onclick="moveOptionTop(this.form.<%= selected_tag_id %>);" />
+ <input type="button" value="↑" onclick="moveOptionUp(this.form.<%= selected_tag_id %>);" />
+ <input type="button" value="↓" onclick="moveOptionDown(this.form.<%= selected_tag_id %>);" />
<input type="button" value="⇊" onclick="moveOptionBottom(this.form.<%= selected_tag_id %>);" />
- </td>
- </tr>
-</table>
+ </span>
+</span>
<%= javascript_tag do %>
$(document).ready(function(){
min-width: 1em;
}
-table.query-columns {
- border-collapse: collapse;
- border: 0;
-}
-
-table.query-columns td.buttons {
+.query-columns>span {
+ display:inline-block;
+ height:100%;
vertical-align: middle;
- text-align: center;
}
-table.query-columns td.buttons input[type=button] {width:35px;}
+.query-columns label {
+ display:block;
+}
+.query-columns .buttons input[type=button] {
+ width:35px;
+ display:block;
+}
+
.query-totals {text-align:right;}
.query-totals>span:not(:first-child) {margin-left:0.6em;}
.query-totals .value {font-weight:bold;}