Updating the UpdatePanel causes duplication of CssClass

In my ASP.NET Webforms project, I have created a user control that inherits from the LinkButton. This user control has a property to adjust the size by adding predefined CSS classes to the control.

Protected Overrides Sub CreateChildControls()
    Dim SizeClass As String = String.Empty
    If Size = SizeEnum.Large Then
        SizeClass = "large"
    Else
        SizeClass = "small"
    End If

    Me.CssClass += " button " + SizeClass

    Me.Controls.Add(New LiteralControl(String.Format("<span class=""l"">{0}</span><span class=""r""></span><span class=""clear""></span>", Me.Text)))
    MyBase.CreateChildControls()
End Sub

It all seems pretty straightforward. However, when this control is placed within an update panel alongside other elements, the class property multiplies with each update. For example, it could result in a class property like

class=" button small button small button small button small button small"

This situation seems a bit ridiculous. Do you have any insights on why this behavior is occurring?

Answer №1

Consider making a change

Me.CssClass += " button " + SizeClass

Modify it to

Me.CssClass = " button " + SizeClass

Every time the control is rendered, the CssClass gets saved in the control's ViewState. This leads to continuous appending when it renders.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the CSS properties of a specific element within a dynamically generated JavaScript list

So I'm working on a JavaScript project that involves creating a navigation bar with multiple lists. My goal is to use the last list element in the bar to control the visibility (opacity) of another element. So far, I have been using the following code ...

Unique rephrased text: "Varied wrapping styles in both

Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google. I wanted to neatly display my text within one of my cards, but so far I've only achieved th ...

What is the reason behind MVC model binding correctly resolving a complex object when the request is made through POST, but not resolving it when made through GET?

Within my controller, I have created a Customer ViewModel class as showcased below. This class consists of two properties: FirstName and LastName, along with a third property named Orders which is essentially a collection of Order objects public class Cu ...

Alignment problem detected in Firefox and Safari, but works perfectly in Chrome

Currently dealing with a CSS problem on my website that is only appearing in Safari and Firefox, while Chrome displays it correctly. The images are not positioning correctly and are stacking instead of being placed in each box as intended. I've expe ...

Identify discrepancies between two lists without relying on LINQ to manage update history

Currently, I am working on a C# webform project that requires tracking the history of changes. Whenever someone updates the data, it should be inserted into the logs table. However, I need to capture which column or field is being updated. My solution invo ...

Unexpected outcomes when generating jQuery pages using CSS

I have created a piece of JavaScript code that populates 3 divs with icons in even rows. However, I am facing an issue where my first two rows align as expected, but the third row starts aligned with .col-5. Can you help me troubleshoot this? function row ...

Aligning icons side by side using only CSS styling

I'm having trouble positioning icons next to each other horizontally and they keep stacking on top of one another. Can you please review my CSS code to see if I made a mistake? Here is the CSS: #social { top:20px; left:30px; height:32px; width:200p ...

Adding spacing breakpoints in Material-UI 5 sx properties

Currently in the process of updating my components to utilize the latest MUI version. I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion. However, one thing that concerns me is handl ...

What is the most effective method for confirming data presence in a database while iterating through a loop?

As I iterate through a for loop, I want to verify if a particular data exists in table1 within the database. If it is found, I will continue with the loop; if not, I need to add the data to table1. The process of checking the database during each iteratio ...

Bootstrap carousel powered by AngularJS

Struggling to incorporate bootstrap, angular, and a carousel to showcase images from local folders on my drive. Unsure how to customize the angular file properly. The example provided in the link below fetches images from the Internet, but I need to modify ...

Setting the CSS property `overflow-y: scroll;` does not make the element scrollable and causes it to exceed 100% of the block

I am seeking a solution to create a y-axis scrollable block within the left-navbar. The height of this block should occupy all available space within the left-navbar, ensuring that the left-navbar itself remains at 100% of the page height. The issue arise ...

Utilizing CSS for styling a specific class in a Joomla Module

Recently, I was working on a Joomla Module and came across an interesting issue. When inspecting the CSS using Firebug, I noticed that there were multiple nested divs within the module, each with its own class. One example of this structure looked like: & ...

Align images at the center of a division using the Bootstrap framework

I'm facing an issue with centering social network icons under a div in my login form while keeping it responsive. Can someone please assist me with this problem? Please help me!!. .row { background: #f8f9fa; margin-top: 20px; } .col { bor ...

In Firefox, the functionality of applying background-position-y to a label when it is immediately preceded by a checked input[type=radio]

CSS selector input[type=checkbox]:checked + label is not functioning properly in Firefox browser! label { display: block; font-family: 'Muli'; font-size: 14px; color: #666; vertical-align: top; background: url("https://s31.postimg. ...

Align content vertically within a div container

I have encountered an issue where I am trying to center vertically the content within a div. Here is an example of the structure: <div class="container-fluid"> <div class="row restaurant"> <div class="col-md-6"> & ...

Discovering Characters in String using jQuery and Implementing a Personalized Class

Update: To achieve the desired typography, I will need to implement some creative jquery / css techniques. The first step is to create a class called .underlined which will allow me to have complete control over the underline by setting a background imag ...

Creating two submenus in the sidebar: a step-by-step guide

I am looking to implement a feature where clicking on the sidebar menu will reveal 2 submenus. Here is what I have implemented: $(document).ready(function () { $("[data-toggle]").click(function () { var toggle_el = $(this).data("toggle"); ...

Tips on presenting messages to users after clicking the submit button?

I am trying to extract data from a table. I am unsure if my current code is able to retrieve the value from the table. <script> function validateForm() { var x = document.forms["assessmentForm"]["perf_rating11"].value; var y = document.f ...

Is it acceptable to duplicate and replace content directly from the Google Inspector tool?

As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...

locating the specifications of the server hosting my website

Currently, I am in search of information regarding the processor details of a server. I am interested in knowing the specific type of processor, operating system, RAM, and other relevant specifications. A web hosting company has provided me with some detai ...