Can the <span> containing the edit icon be removed?

[Dave]

I know the edit icon can be rendered hidden in css but is there a way to eliminate the displayed space taken up by the icon? Thank you.

[Revanth Krishnan]

Hi Dave,

We have validated your query and your requirement to hide the edit icon and also to hide the space taken by the edit icon can be achieved by customising the CSS of the below classes,

• By using display style in the “.e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon” class to hide the edit icon.
• And using margin style in the “.e-inplaceeditor .e-editable-value-container .e-editable-value” class to hide the space taken by the edit icon.

Code Snippet:

<style>

    .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {

        display: none;

    }

 

    .e-inplaceeditor .e-editable-value-container .e-editable-value {

        margin: 0px;

    }

</style>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/InPlaceEditor_App-1145269471

Please check the above code snippet, and the sample and let us know if it satisfies your requirement.

Regards,

Revanth

[Dave]

Thank you, it works perfectly.

[Vinitha Jeyakumar]

Hi Dave,

We are glad to assist you.

Regards,

VinithaTab