Update CSS property from Code behind

Question

I am new to web programming and need some help. I am using this CSS code to control look of a label dynamically. how can I change the value of the attribute "width"from code behind dynamically?Also I need to flash the label text. Please find my code below

**strong text**
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
     <style type="text/css">
            .bar {
        position: relative;
        width: 250px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        background: #003458;
        background: linear-gradient(to bottom, #005478 0%,#003747 100%);
        color: white;

    }

    .bar:before {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        bottom: 0;
        width: 40%;**** this value needs to be changed from code behind.
        content: '';
        background: rgba(0, 255, 0, 0.1);
    }
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
<asp:Label ID="Label18" runat= "server"  CssClass="bar">20%</asp:Label>

</ContentTemplate>

        </asp:UpdatePanel>

Solutions would be appreciated.

Thank you in advance!

Using :before selector you are inserting content in the client side and server has no idea about it. I don't think you can change it from server. — afzalulh
– afzalulh, Commented Sep 21, 2013 at 2:27

MikeSmithDev · Accepted Answer · 2013-09-21 20:23:36Z

3

You could set that width to a variable that you control:

.bar:before {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        bottom: 0;
        width: <%= BarWidth %>;
        content: '';
        background: rgba(0, 255, 0, 0.1);
    }

Then in your code behind, set it:

private string barWidth = "40%";

public string BarWidth
{
    get { return barWidth; }
    set { barWidth = value; }
}

protected void Page_Load(object sender, EventArgs e)
{
    barWidth="70%";
}

UPDATE: following your comment... here is a different approach. I renamed .bar:before to .barStatus and removed the width line from the CSS. You won't need the HiddenField like I have in the example... this is just an example so you can watch it work, and then fix it to be what you need for your code.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="_bar" class="bar"><span id="_barStatus" style="width:0%;" class="barStatus" runat="server"></span></div>
        <asp:Timer runat="server" id="Timer1" Interval="100" OnTick="UpdateBar"></asp:Timer>
        <asp:HiddenField ID="_barState" Value="10" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

And the OnTick function:

protected void UpdateBar(object sender, EventArgs e)
{
    int barStatus = Convert.ToInt32(_barState.Value);
    if (barStatus < 100)
    {  
        barStatus += 2;
        _barState.Value = barStatus.ToString();
        _barStatus.Attributes["style"] = String.Format("width:{0}%;", barStatus);
        _barStatus.InnerText = String.Format("{0}%", barStatus);
    }
}

edited Sep 21, 2013 at 20:23

answered Sep 21, 2013 at 3:35

MikeSmithDev

15.8k4 gold badges61 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2801184 Over a year ago

@MikeSmithDev: Thank you so much for your reply. I actually want to control barwidth from timer continueously and not while page is loading. Everytime it will check database and update width accordingly.

MikeSmithDev Over a year ago

@user2801184 Ah, ok. I added an example that should give you some ideas on how to approach. Good luck.

user2801184 Over a year ago

<p style="font-family: verdana; font-size: small; font-style: normal; color: #000000; height: 27px;"> Await Time Remaining <asp:Label ID="Label18" runat="server" CssClass="bar"> </asp:Label> <asp:HiddenField ID="_barState" Value="10" runat="server" />   </p> @MikeSmithDev: Once again Thank you for reply. I can see your solution works fine but I want to make it work for label tag only. Is it possible?

MikeSmithDev Over a year ago

@user2801184 Yes it's possible... very similar to what I showed. Did you try anything? Using an asp:Label isn't really going to generate any different HTML to the client, so I'm not sure why you seem more concerned about what control you use than finding a solution, unless this is homework or there is some other requirement you haven't explained.

user2801184 Over a year ago

@MikeSmithDev: Hey man, I was planning to do in different way than what you have posted before. I had already thought of doing it using asp:label and I was wondering how to do it. Anyways man, once again: I really appreciate your help. You have been really kind to answer my questions. I am reading tutorials and soon will get to answer.God Bless!

|

Zainab · Accepted Answer · 2013-09-21 04:34:44Z

0

For Label Width Label18.Style.Add("width","200px"); Label18.Width = 200; [ this will also work ]

For text display Label18.Text ="Whatever you want to display";

answered Sep 21, 2013 at 4:34

Zainab

253 bronze badges

Collectives™ on Stack Overflow

Update CSS property from Code behind

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related