ui.list 的样式(自动高度或 css 溢出)
Styling of ui.list (autoheight or css overflow)
我正在尝试自定义 Webix ui.list 小部件的样式,但有两个问题我无法自行解决:
有没有办法设置项目的自动高度?
如果否,class 将允许设置 `text-overflow:ellipsis?
这里有一个sample和当前实现的代码:
CSS:
.webix_list_item{
border: 1px solid #ebebeb;
border-radius: 5px;
margin:15px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
background: #fafafa;
}
.webix_list_item:hover{
box-shadow: 0 0 10px rgba(177,44,99,0.6);
border: 1px solid #efefef;
background: #efefef;
}
.webix_list_item.webix_selected {
color: #fff;
background: #cac1c5;
border: 1px solid #bfb8bb !important;
}
JS(很简单):
webix.ui({
view:"list",
data:list_data,
width:230, scroll:false,
select:true
});
琐碎,这是你期待的吗?
http://webix.com/snippet/0e340ea4
我添加了以下内容 css:
.webix_list_item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
如果要设置自动高度:
.webix_list_item {
white-space: normal;
overflow: visible !important;
height: auto !important;
}
除了CSS解决方案外,Webix列表还有一个type
属性可以处理项目的高度。特别是:
type:{
height:"auto"
}
我正在尝试自定义 Webix ui.list 小部件的样式,但有两个问题我无法自行解决:
有没有办法设置项目的自动高度?
如果否,class 将允许设置 `text-overflow:ellipsis?
这里有一个sample和当前实现的代码:
CSS:
.webix_list_item{
border: 1px solid #ebebeb;
border-radius: 5px;
margin:15px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
background: #fafafa;
}
.webix_list_item:hover{
box-shadow: 0 0 10px rgba(177,44,99,0.6);
border: 1px solid #efefef;
background: #efefef;
}
.webix_list_item.webix_selected {
color: #fff;
background: #cac1c5;
border: 1px solid #bfb8bb !important;
}
JS(很简单):
webix.ui({
view:"list",
data:list_data,
width:230, scroll:false,
select:true
});
琐碎,这是你期待的吗?
http://webix.com/snippet/0e340ea4
我添加了以下内容 css:
.webix_list_item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
如果要设置自动高度:
.webix_list_item {
white-space: normal;
overflow: visible !important;
height: auto !important;
}
除了CSS解决方案外,Webix列表还有一个type
属性可以处理项目的高度。特别是:
type:{
height:"auto"
}