The footer CSS fails to function properly when the webpage dynamically loads content upon clicking a button

.html

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="dark.css" rel="stylesheet" type="text/css" id="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    <asp:Label ID="CaptionLabel" runat="server"></asp:Label>
    <asp:TextBox ID="NumberTextbox" runat="server">(empty)</asp:TextBox>
    <asp:Button ID="SquareButton" runat="server" Text="Square" style="background-color:Blue; color:White;" />
    <asp:Label ID="ResultLabel" runat="server" Text="(empty)" CssClass="reverse"></asp:Label>
    <p>
        <asp:Label ID="Label1" runat="server" CssClass="footer1" 
            Text="Label Label Label Label LabelLabelLabel Label Label Label Label Label Label Label"></asp:Label>
    </p>
    <asp:RadioButton ID="radioDark" runat="server" AutoPostBack="True" 
        Checked="True" GroupName="grpSelectStylesheet" 
        oncheckedchanged="SwitchStylesheets" Text="Dark" />
    <br />
    <asp:RadioButton ID="radioLight" runat="server" AutoPostBack="True" 
        GroupName="grpSelectStylesheet" oncheckedchanged="SwitchStylesheets" 
        Text="Light" />
    <asp:GridView ID="GridView1" runat="server">
    </asp:GridView>
    </form>
    </body>
</html>

.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {


    }
    protected void SwitchStylesheets(object sender, EventArgs e)
    {
        if (radioDark.Checked)
            stylesheet.Href = "dark.css";
        if (radioLight.Checked)
            stylesheet.Href = "light.css";

    }
    protected void Button1_Click(object sender, EventArgs e)
    {

        int count=DateTime.Now.Second;
        for (int i = 0; i < count; i++)
        {//for
            Label q = new Label();
            q.ID = DateTime.Now.Second.ToString();

            q.Text = DateTime.Now.Second.ToString();
            string spacee = "<br />";
            Label space = new Label();
            space.Text = spacee;
            form1.Controls.Add(q);
            form1.Controls.Add(space);
        }//for
    }
}

When the button is clicked, it works as expected but the footer does not adjust to the page expansion.

Answer №1

Your approach to styling the control is incorrect as you cannot directly change the stylesheet when autopostback is true. Here is a better way to achieve this:

1- First, remove the .css reference from your page.

2- Next, add the following method to your page:

private void UpdateStylesheet(string filepath)  
{  
   HtmlLink newStyleSheet = new HtmlLink();  
   newStyleSheet.Href = filepath;       
   newStyleSheet.Attributes.Add("type", "text/css");  
   newStyleSheet.Attributes.Add("rel", "stylesheet");  
   Page.Header.Controls.Add(newStyleSheet);  
}  

3- In your page_load event, include the following line:

UpdateStylesheet("dark.css");  

4- Handle the SwitchStylesheets accordingly:

if (radioDark.Checked)  
    UpdateStylesheet("dark.css");   
if (radioLight.Checked)  
    UpdateStylesheet("light.css");   

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

Follow us text placed in front of social sprite images all aligned on the same line

Is there a way to align the Follow Us text with sprite images? Check out this jsfiddle link for more details! <ul class="social_Emp">&nbsp;&nbsp;&nbsp;Follow us: <li class="Emp_twitter"><a href="{if $userInfo.TwitterPage} {$u ...

I'm curious if there is a comparable version of .NET Core's IControllerActivator within the .NET Framework

In the world of Dependency Injection: Principles and Practices, there lies a realm where setting up dependency injection using an IControllerActivator implementation is key. For ASP.NET Core projects, inserting this into the program's services within ...

JavaScript CheckBox Color Change Not Functioning

Hello, I am currently experimenting with the checkAll function. When I click on the checkAll checkbox, it should select all rows and change their background color accordingly. Below is the JavaScript code I am using: function checkAll(objRef) { v ...

Attempting to access unsigned characters may lead to an Access Violation Exception

I'm currently working on a wrapper library that enables my project to use an x86 C++ dll library in any CPU environment. Since I have no control over the dll, I am utilizing DllImport in C#. The C++ library provides a function declaration like this: ...

Tips on using the Hover property in CSS for an element that includes both :after and :before properties

I've created a hexagon using CSS after and before properties, and now I'm attempting to add a glowing effect around the hexagon when hovering. It works perfectly for the center of the hexagon but not for the top and bottom points of the shape. ...

Force Angular to log the user out abruptly

I am currently utilizing .Net Core Web API on the backend and Angular on the frontend for my project. When a user signs in, I generate a JWT token for authentication purposes. However, I have chosen not to store this token in the database. One issue I&a ...

Developing interactive virtual directories similar to social media usernames on platforms like Facebook

I'm looking to enhance my website by implementing a feature that allows users to select a username and then access their dedicated page using www.thisismysite.com/theirusername. Despite searching extensively on Google, I'm still unsure of what ex ...

Understanding Entity Framework: Dealing with tables in many-to-many relationships

Running a news entity with NewsID as the identifier, I recently introduced a new Group entity to fetch news based on their Group ID. To establish this relationship, I created a Group news Table. Within the news model, I included: public virtual ICollecti ...

What are the best methods for placing content within a box and ensuring it is responsive?

Having trouble solving a simple problem that seems to have an easy solution. The code I'm working on is meant to display multiple bubbles with similar content, but the text gets distorted due to using strange margin values to fit a specific resolution ...

RadRotator fails to resize properly when browser window is resized

I'm currently attempting to adjust the size of this control when the browser is resized. I searched through forums for a solution before posting my question. I came across a JavaScript function (unfortunately, it's not working). <script t ...

Outcome1 property has a higher level of accessibility compared to the Enum

public class MysteryNumber { //Constructor public MysteryNumber() { Begin(); _previousAttempts = new List<int>(); } //Constant public const int MaxAttempts = 7; //Field private int _number; privat ...

What specific attributes and functions can be utilized in Dictionary<TKey, TValue> that differ from those in IDictionary?

Are there specific properties or methods that can only be used with a Dictionary object and not an IDictionary? For more information on the differences between Dictionary and IDictionary, check out the following links: A difference in style: IDictionary ...

Animated collapse with margin effect in Material-UI

I have been utilizing the MUI-Collapse component to display collapsible content within a list. I am looking to add vertical spacing between the Collapse components in the list, but I do not want the spacing to remain when the Collapse is collapsed. I am ha ...

What is the best way to showcase a series of database entries in a messagebox using C#?

I am currently working in WinForms and using c#. I am trying to show a list of employees with an expiry card date. The code snippet below is what I have attempted so far: DataManager.NotificationManager obj = new DataManager.NotificationManager(); DataTa ...

Is there a managed library that can be used for SHA512 within Silverlight since it is not available?

SHA512Managed is not available in Silverlight for Windows Phone 7 CTP SDK, only up to SHA256 can be used. Can anyone suggest a .NET class with a self-contained implementation of SHA512 in either C# or VB.net? I require this for authentication with an HTTP ...

Image showcasing the background

I'm facing an issue with adding a background image to my project Even after trying to add it globally, the background image is not showing up on the Next.js index page. import { Inter } from 'next/font/google' const inter = Inter({ subsets: ...

Ways to navigate a div within an iframe that has been loaded

As I load a page(A) inside an iframe, the HTML structure of the embedded content is as follows: <html><body> <div id="div1"></div> <div id="div2"><button>Hello</button></div> </body></html> The ...

`Is it possible to utilize bootstrap in order to structure rows with three elements each?`

My goal is to create a layout similar to this using Bootstrap 4: https://i.sstatic.net/EF4lL.png, where there are 3 elements displayed in each row. The elements I want to display are as follows: <div class="sprite d-inline-block bg-info rounded p-1 m- ...

Struggling to convert JSON data to CSV format when extracting stock information from Yahoo Finance

Trying to convert the JSON string from Yahoo finance's stock data using a variety of tools found online such as JSON.NET. Access MSFT Yahoo Data here. Looking to transform the JSON string into CSV format with columns for Date, Open, High, Low, Close ...

Creating a layout with an image positioned on the left and text on the right within a block using CSS

Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you! < ...