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

How to maintain Selected Value Style with Custom ValueTemplate


awesome library so far, highly customizable, I am excited to furtherly get used to it.

However I have a question. I have found already a way to have a Enumeration DataSource for my DropDownList.

<SfDropDownList TValue="EAppointmentType" TItem="EAppointmentType" DataSource=@AppointmentTypeCollection Placeholder="Wähle einen Typ">
    <DropDownListTemplates TItem="EAppointmentType">
        <ItemTemplate Context="appointmentType">

        <ValueTemplate Context="appointmentType">

Now my problem is, that, as soon as I select an item in the dropdown, the selected value is in the top left corner, i want it to be vertically centered with small margin like normally when i dont use a custom ValueTemplate. How can i maintain the ValueTemplate style?


Thanks in advance

1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team March 16, 2023 04:27 PM UTC

You can use the CSS style below to resolve the reported issue on your end. Please refer to the code snippet and video illustration shared below for more information.


    .e-ddl.e-input-group .e-input-value{


        margin-left: 5px;




Live Chat Icon For mobile
Up arrow icon