How to customize text vertical alignment and overflow

[Dave]

I'd like over-running text to show elipses and the edit icon to show (it presently gets truncated on the right) and I'd like all of the text in a row to be vertically aligned the same, preferably in the center. Thank you.

<div class="container">

    <div class="row">

        <div class="col-2 text-nowrap">Name</div>

        <div class="col-2 text-nowrap">

            <SfInPlaceEditor Mode="RenderMode.Inline"

                             Type="InputType.Text" 

                             Value="@TextValue" 

                             SubmitOnEnter="true" 

                             Model="@TModel">

            </SfInPlaceEditor>

        </div>

        <div class="col-8"></div>

    </div>

</div>

<style>

    .e-inplaceeditor {

        width: inherit;

        overflow: hidden;

        text-overflow: ellipsis;

    }

    .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {

        border-bottom: none;

        color: inherit;

        text-align: left;

    }

</style>

@code {

    public string TextValue = "A very long text string to see if it overruns the column";

    public TextBoxModel TModel = new TextBoxModel()

    {

        Placeholder = "Enter employee name"

    };

}

[Pandiyaraj Muniyandi]

Hi Dave, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement with shared sample code block and it can be achievable by replacing below CSS styles in your example code 

 

 

<style> 

    .e-inplaceeditor .e-editable-value-wrapper { 

        white-space: initial; 

    } 

 

        .e-inplaceeditor .e-editable-value-wrapper .e-editable-value { 

            text-align: center; 

        } 

</style> 

 

 

We have prepared sample for your reference, get it from below link 

https://www.syncfusion.com/downloads/support/forum/153716/ze/Editor1290086385 

 

Regards, 

Pandiyaraj 

[Dave]

Thank you for your quick reply. I should have attached an output to my original post to better explain.

- I'd like the InPlace Editor text (green box) to be vertically aligned in the middle of the row. It presently aligns to the top.

- When I set overflow to "text-overflow: ellipsis;" and "overflow: hidden;" the editor box truncates on the right such that the ellipses don't show.

[Revanth Krishnan]

Hi Dave, 

 

Good day to you. 

 

We have validated your requirement `ellipses style not displayed after setting it` and shared sample code block and it can be achievable by replacing below CSS styles in your example code 

 

Code Snippet: 

<style> 

    .e-inplaceeditor .e-editable-value-wrapper { 

        white-space: nowrap; 

        overflow: hidden; 

        text-overflow: ellipsis; 

        width: 100px; 

        padding: 6px 15px; 

     } 

     .e-inplaceeditor .e-editable-value-wrapper .e-editable-value { 

        text-align: center; 

        display: inline; 

     } 

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

        right: 0px; 

     } 

</style> 

 

We have prepared sample for your reference, get it from below link 

https://www.syncfusion.com/downloads/support/forum/153716/ze/Editor1290086385-1046262701 

Regards, 

Revanth 

[Dave]

Thank you, that solved my problem with the ellipses. And pointed me in the right direction to solve the vertical alignment issue.

[Indrajith Srinivasan]

Hi Dave,

Thanks for the update,

We are glad that your reported issue is resolved. Please let us know if you need any further assistance.

Regards, 

Indrajith