I am utilizing a kendoui listview to showcase various signatures in an ASP.NET MVC 5 project.
My goal is for the listview to allow selection and exhibit data based on a predefined template.
Everything is functioning properly, except for an unwanted margin that appears when selecting items, and I'm unsure how to remove it!
Here's the template I'm using:
<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>
And here is my CSS style:
<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>
The displayed items are exactly as intended:
https://i.sstatic.net/Mmr46.png
However, when I select an item, I want to eliminate this margin:
https://i.sstatic.net/3PhYW.png
You can view a complete demo here:
Any assistance with resolving this issue would be greatly appreciated.