Question

我内部有三到四个元素＆＃39;一张桌子。

标题标签
排序图标
过滤器的标签但在我的情况下，虽然存在于dom
输入文本过滤器或包含在div中的日期范围选择器。

这个＆＃39;由组件库primefaces自动生成，我无法控制它。问题是当有很多列时，某些列的排序图标会移动到新行，并且输入和日期范围不对齐。

--------------------------------------------------------------
label1 long| label2 ^  | label3 ^         | label4 is longg |
^          | _________ | ---------------  |^                |
_________  |           | | select date |  | --------------  |
           |           |                  | | select date|  | 
---------------------------------------------------------------

上面的HTML输出类似于

    <th id="entityForm:results_table:j_idt280" class="ui-state-default ui-sortable-column ui-filter-column ui-state-active" role="columnheader" aria-label="Task Number: activate to sort column ascending" scope="col" tabindex="0" aria-sort="descending">

        <span class="ui-column-title">Task Number</span>

        <span class="ui-sortable-column-icon ui-icon ui-icon ui-icon-carat-2-n-s ui-icon-triangle-1-s"></span>

        <label id="entityForm:results_table:j_idt280:filter_label" for="entityForm:results_table:j_idt280:filter" class="ui-helper-hidden">Filter by Task Number</label>

        <input id="entityForm:results_table:j_idt280:filter" name="entityForm:results_table:j_idt280:filter" class="ui-column-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" value="" autocomplete="off" aria-labelledby="entityForm:results_table:j_idt280:filter_label" role="textbox" aria-disabled="false" aria-readonly="false">

</th>

我所做的是

鉴于＆＃39;相对的位置
标题标签边距的第一个范围和80％宽度。
排序图标是绝对位置和右侧偏移量
输入框和日期范围选择器我试图给出一个固定的相同高度和绝对位置以及从底部偏移。

这样，它们对齐并且排序图标不会移动到新行。

我不是UI开发人员，只需要一些想法，这是实现这一目标的最佳方式，或者我可能过度了。我必须支持IE 10及以上版本。

我的Css是

th.ui-sortable-column.ui-filter-column {
    position: relative;
}


th.ui-sortable-column.ui-filter-column > span.ui-column-title {
    width: 80%;
    display: block;
    margin-bottom: 30px;
}

th.ui-sortable-column.ui-filter-column > span.ui-sortable-column-icon {
    position: absolute;
    top: 10px;
    right: 4px;
}


th.ui-sortable-column.ui-filter-column > .ui-column-filter {
    position: absolute;
    bottom: 0px;
    height:25px;
}


th.ui-sortable-column.ui-filter-column > .ui-column-customfilter > button.comiseo-daterangepicker-triggerbutton {
    height:25px;
}

th.ui-sortable-column.ui-filter-column > .ui-column-customfilter > button {
    bottom: 2px;
    position: absolute;
    left: 0px;
    margin-left: 5px;
    margin-right: 5px;
}

请建议。

调整表标题中的元素以显示内联

0 个答案: