1. Home
  2. Forum
  3. Blazor
  4. How to customize text vertical alignment and overflow

How to customize text vertical alignment and overflow

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"
    };
}

5 Replies
PM Pandiyaraj Muniyandi Syncfusion Team April 28, 2020 09:14 AM UTC

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 
 
Regards, 
Pandiyaraj 


DA Dave April 28, 2020 02:48 PM UTC

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.



RK Revanth Krishnan Syncfusion Team April 29, 2020 09:54 AM UTC

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 
Regards, 
Revanth 


DA Dave April 29, 2020 09:59 PM UTC

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

IS Indrajith Srinivasan Syncfusion Team April 30, 2020 06:30 AM UTC

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 


Loader.
Up arrow icon