We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

bug in listview?

I try to reduce the height of the listview entries using cssclass and if I reduce it too much, the result is that the text "floats" down leaving the first entry blank and the last entry disappears.  The following illustrates this.  you can get the text to shift up by increasing height in
.e-lv.customclass .e-list.
Thank you.

<style type="text/css" class="cssStyles">
    * {
        font-family: Arial;
    }
       .e-lv.customclass .e-htitle, .e-lv.customclass .e-btn-text {
            font-size: 8px;
            vertical-align: middle;
            text-align: center;
            padding: 0;
            height: 11px;
            margin: 0;
            width: 100px;
        }

        .e-lv.customclass .e-header {
            font-size: 9px;
            height: 11px;
            vertical-align: middle;
            background-color: pink;
            padding: 0;
            box-sizing: padding-box;
            margin: 0;
            width: 100px;
        }

        .e-lv.customclass .e-list {
            font-size: 8px;
            background-color: yellow;
            vertical-align:top;
            padding: 0;
            margin: 0;
            height: 11px;
        }

    }
</style>

<div>
    @(Html.EJ().ListView("Listview").AutoAdjustHeight(true).Width(300).ShowHeader(true).EnableCheckMark(false).HeaderTitle("Victims").CssClass("customclass")
    .Items(items=>
    {
    items.Add().Text("Inbox");
    items.Add().Text("VIP");
    items.Add().Text("Drafts");
    items.Add().Text("Sent");
    items.Add().Text("Junk");
    items.Add().Text("Trash");
    items.Add().Text("All mails");
    items.Add().Text("Mail");
    }))

3 Replies

AP Arun Palaniyandi Syncfusion Team June 2, 2017 11:46 AM UTC

Hi Lawrence, 
 
Thanks for contacting Syncfusion support. 
 
Based on the analysis of your custom CSS, we found that you have overridden the CSS for li item only and not for the elements inside it. So we suggest you to remove the padding for anchor tag inside the li tag. Please find the below CSS changes. 

CSS: 

.e-lv.customclass .e-list { 
        font-size: 8px; 
        background-color: yellow; 
        vertical-align: top; 
        padding: 0; 
        margin: 0; 
        height: 11px; 
        line-height:11px; //Adjust the line height according to height 
    } 
     .e-lv.customclass .e-list .e-chevron-right_01 { 
 
        padding: 0px;    //By default padding top,botton is set 12px and hence remove that padding 
    } 



We have also prepared a sample for your reference below with the above CSS changes. 
 
 
 
Regards, 
Arun P. 



PN Preethi Nesakkan Gnanadurai Syncfusion Team June 5, 2017 03:59 AM UTC

From: lawrence.greenberg@judicialdialog.com [mailto:lawrence.greenberg@judicialdialog.com]
Sent: Friday, June 2, 2017 9:05 AM
To: Syncfusion Support <support@syncfusion.com>
Subject: RE: Syncfusion support community forum 130776, bug in listview?, has been updated.
 

Arun, 
Thank you very much for your response.  Adding .e-chevron-right_01 to the selector fixed the problem. 



AP Arun Palaniyandi Syncfusion Team June 6, 2017 10:11 AM UTC

Hi Lawrence, 
 
We are glad that our solution had helped you. 
 
Please let us know if you have any queries in future. 
 
Regards, 
Arun P. 


Loader.
Live Chat Icon For mobile
Up arrow icon