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

Modify Edit Dialog Style

How can I change the style of the edit dialog? Currently the styles are being overwritten with inline styles. The really strange thing is that some input fields have the text-align property set to "left" and some are set to "center" even though the input fields are configured the same within the template.

Here is the html that goes with the elements shown in the attached image:

This input field: <input id="MAIL_ADDRE" name="MAIL_ADDRE" value="{{:MAIL_ADDRE}}" class="e-field e-ejinputtext" style="width: 210px; height: 28px" /> get's an inline style of text-align: left;
And this field: <input id="EMER_CONT" name="EMER_CONT" value="{{:EMER_CONT}}" class="e-field e-ejinputtext" style="width: 210px; height: 28px" /> get's an inline style of text-align: center;

Thank you in advance!

Attachment: Capture_7cb78847.7z

1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team March 17, 2017 10:58 AM UTC

Hi Klein,  
Thanks for contacting Syncfusion Support.  
We are able to reproduce the problem at our end. By default, the fields in the Edit form (dialog/dialog template), will be aligned based on the TextAlign property of the Grid Columns. If you have assigned ‘Center’ to the TextAlign property of the respective column, the same has been applied to the EditForms of the Grid.  
If you would like to change the alignment for the Editing fields alone, you can change the text-align property of the respective column in ActionComplete event of the Grid. Refer to the following code example. 
            .EditSettings(edit => 
            .Columns(col => 
                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add(); 
                //Frieght column aligned center 
                //Likewise Editform field also 
            .ClientSideEvents(events => events.ActionComplete("complete")) 
    function complete(args) { 
        if (args.requestType == "beginedit" || args.requestType == "add") { 
            if (args.requestType == "beginedit") 
                $("#OrderID").attr("disabled", "disabled"); 
            $("#Freight").css("text-align", "left")//align the fields; 
We have prepared a sample that can be referred from the following jsPlayground. 
Seeni Sakthi Kumar S. 

Live Chat Icon For mobile
Up arrow icon