Применить стиль к выбранному элементу списка кэндуев

Question

Я использую кэндуи 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>