将样式应用于 kendoui listview 选定项目

Posted 2023-05-08

【中文标题】将样式应用于 kendoui listview 选定项目

【英文标题】：Apply style to kendoui listview selected item

【发布时间】：2019-07-25 14:12:23

【问题描述】：

我正在使用 kendoui listview 在 asp.net mvc 5 项目中显示一些签名。

我希望我的listview 可以选择并根据定义的模板显示数据。

一切正常，除了我在选择项目时有一个恼人的边距，我不知道如何摆脱它！

这是我的模板：

  <script type="text/x-kendo-template" id="sTemplate">
            <div class="signature">
                <img src="data:image/png;base64,$Base64Image" />
                <h3>#:SigneeName#</h3>
                <h3>#= kendo.toString(kendo.parseDate(TimeStamp), "dd/MM/yyyy HH:mm")#</h3>
                <p></p>
            </div>
        </script>

这是我的风格：

 <style>
            #listView 
                padding: 5px;                    
                margin-bottom: 5px;
                font: inherit;
            

            .signature 
                float: left;
                position: relative;
                width: 176px;
                height: 160px;
                margin: 5px 5px 5px 0;
                padding: 5px;                    
            

            .signature img 
                width: 175px;
                height: 130px;
            

            .signature h3 
                margin: 0;
                padding: 3px;
                max-width: 156px;
                overflow: hidden;
                line-height: 1em;
                font-size: .9em;
                font-weight: normal;
                text-align: center;
                color: BLACK;
            

            .signature:hover p 
                visibility: visible;
                position: absolute;
                width: 185px;
                height: 170px;
                top: 0;
                margin: 0;
                padding: 0;
                line-height: 170px;
                vertical-align: middle;
                text-align: center;
                color: #fff;
                background-color: rgba(200, 200, 200, 0.5);
                transition: background .2s linear, color .2s linear;
                -moz-transition: background .2s linear, color .2s linear;
                -webkit-transition: background .2s linear, color .2s linear;
                -o-transition: background .2s linear, color .2s linear;
            

            .k-listview:after 
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            
        </style>

项目按预期显示：

当我选择一个项目时，我想去掉这个边距：

这里有一个完整的演示：https://demos.telerik.com/kendo-ui/listview/index

任何帮助将不胜感激。

【参考方案1】：

当项目被选中时，Kendo 会将k-state-selected 类添加到模板中的外部元素。因此，类似于以下 CSS 选择器的内容应该允许您进行更改：

<style>
    .signature.k-state-selected 
        margin: 5px 0;                  
    
</style>