How to maintain Selected Value Style with Custom ValueTemplate

[Johannes]

Hello,

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">
            <span>@EnumerationExtensions.GetEnumDescription(appointmentType)</span>
        </ItemTemplate>


        <ValueTemplate Context="appointmentType">
            <span>@EnumerationExtensions.GetEnumDescription(appointmentType)</span>
        </ValueTemplate>
    </DropDownListTemplates>
</SfDropDownList>

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

[UdhayaKumar Duraisamy]

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.

<style>

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

        padding:5px;

        margin-left: 5px;

    }

</style>