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

Question

我正在使用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

任何帮助将不胜感激。

Answer 1

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

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