英文:
How to place the arrow to the right of the header of a sorted table?
问题
You can move the arrow to the right side of the header element by changing the host style in the directive code. Here's the updated code:
@Directive({
selector: 'th[sortable]',
standalone: true,
host: {
'[class.bi-caret-down-fill]': 'direction === "asc"',
'[class.bi-caret-up-fill]': 'direction === "desc"',
'[(style.padding-left)]': 'direction === "asc" ? "0" : null',
'[(style.padding-right)]': 'direction === "desc" ? "0" : null',
'(click)': 'rotate()',
},
})
This code adds padding-left and padding-right styles to adjust the position of the arrow to the right side of the header when the sorting direction is "desc."
英文:
I have a table and I want to add the sort option to all table headers, so I used the bootstrap exemple for my purpose.
The only problem in this example is the position of the arrow which is on the left side and I want it on the right side of the header element.
I checked the directive code and I found the code below :
@Directive({
selector: 'th[sortable]',
standalone: true,
host: {
'[class.bi-caret-down-fill]': 'direction === "asc"',
'[class.bi-caret-up-fill]': 'direction === "desc"',
'(click)': 'rotate()',
},
})
How should I change the host style to move the arrow to the right side ?
答案1
得分: 1
在 index.html 中处理位置的 CSS 代码如下：
....
th[sortable].desc:before,
th[sortable].asc:before {
content: '';
float: left;
.....
将 float 属性改为 right 演示链接
英文:
On index.html css code which is handling the position is
....
th[sortable].desc:before,
th[sortable].asc:before {
content: '';
float: left;
.....
Change float property to right Working demo
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论