CODEWITHSUNDEEP
c#cssasp.nettwitter-bootstrap-3
Softrich
Softrich

Reputation: 9

ASP.Net Bootstrap Alert very long message

I am developing a Bootstrap Alert in ASP.Net

This is my code in ASPX:

  <asp:Label ID="AlertLB" runat="server"/>

This is my code in CSS

  <style>
    .alert {
        display: block;
        margin-bottom: 1px;
        height: 30px;
        line-height:30px;
        padding:0px 15px;
        display:inline-block
    }        
</style>

This is my Code Behind:

private void SetAlert(string message, string typeAlert)
{
    AlertLB.Visible = true;
    AlertLB.CssClass = "alert alert-" + typeAlert;
    AlertLB.Text = message;
    AlertLB.Focus();
}

This works fine when it is a short message but when it is a very long message the text goes outside the alert:

enter image description here

The perfect solution would be for the text to be truncated to the width of the alert:

enter image description here

Another solution would be for the alert height to be adjusted automatically:

enter image description here Could you help me? Thank you.

Upvotes: 0

Views: 421

Answers (2)

Softrich
Softrich

Reputation: 9

Searching I found the following article that helped me find the solution:

https://asp-net-example.blogspot.com/2013/11/aspnet-example-label-ellipsis.html

I added to my CSS code:

<style type="text/css">
    .LabelEllipsisStyle {
        text-overflow:ellipsis;
        white-space:nowrap;
        display:block;
        overflow:hidden;
    }
</style>

I modified my Code Behind:

private void SetAlert(string message, string typeAlert)
    {
        AlertLB.Visible = true;
        AlertLB.CssClass = "alert alert-" + typeAlert + " LabelEllipsisStyle";
        AlertLB.Text = message ;
        AlertLB.Focus();
    }

The Solution:

Solution Image

Upvotes: 0

Selim Yildiz
Selim Yildiz

Reputation: 5370

According to bootstrap you can add text-truncate class to alert label:

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

private void SetAlert(string message, string typeAlert)
{
    AlertLB.Visible = true;
    AlertLB.CssClass = "alert alert-" + typeAlert +" text-truncate";//added text-truncate
    AlertLB.Text = message;
    AlertLB.Focus();
}

Upvotes: 1

Related Questions