I am trying to dynamically change the style of a div element in the master page from my child page.
This is the code I am using:
protected void ShowMsgText(int MsgID)
{
HtmlGenericControl MsgInner;
MsgInner = ((HtmlGenericControl)Master.FindControl("MsgInner"));
MsgInner.Attributes["class"] = "MsgInnerShow";
}
The div id is MsgInner, but unfortunately, no changes are reflected after running this code!
After thorough investigation, it appears that the issue stems from having an update panel in the child page (aspx) and a message div in the master page. While the update panel can successfully update controls within its scope, it cannot update controls outside of it. To resolve this, you will need to place the update panel in the master page.
Master Page:
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div><strong>Demo for master page updation</strong></div>
<div id="divMaster" runat="server">
I am div in master page, going to change with ajax call
</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
Content Page (.aspx):
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
Content Page Code Behind (.aspx.cs):
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000); //To check the effect of ajax call, must be removed
HtmlGenericControl divMaster = (HtmlGenericControl) this.Master.FindControl("divMaster");
divMaster.InnerHtml = "hello I am being change from child page";
}
Establish a public attribute on the main page
MainPage.Master.cs
private string _wrapperType = "Boxed";
public string WrapperType
{
get
{
return _wrapperType;
}
set
{
_wrapperType = value;
}
}
Include this attribute in the HTML code of the container on the Main page:
MainPage.Master:
<div id="MainContainer" runat="server" class="<%=WrapperType %>">
You can modify this parameter in the OnInit or OnLoad method of the subordinate page.
SubordinatePage.aspx.cs
protected override void OnInit(EventArgs e)
{
var master = Page.Master as MainPage;
if (master != null)
{
master.WrapperType = "FullWidth";
}
base.OnInit(e);
}
My HTML input form has a field with placeholder text that extends beyond the padding and gets cut off at the end. https://i.sstatic.net/9r46F.png I am unable to pinpoint the source of this issue. ...
In Firefox, the CSS property pointer-events: none; functions properly. However, it does not work in Internet Explorer 9-10. Are there any alternative approaches to replicate the functionality of this property in IE? Any suggestions? ...
In my current project, I am facing an issue with my menu displaying differently in Firefox and Chrome. When clicking on the links in Chrome, they tend to move around, disrupting the styling of the menu. A common suggestion I found was to use display: block ...
I am having an issue with my AjaxControlToolkit where the main-page CSS is affecting the inner "calendar" popup. To illustrate what I need, what I've tried, and the temporary workaround, I have simplified everything into a one-page example. I am in s ...
When creating a div to provide information about a course, including the price and a "Take Class" button that links to the purchase page, I encountered an issue where the link extends beyond the intended area. @import url(https://fonts.googleapis.com/cs ...
Is there a way to make the images in my navbar resize automatically so they remain next to each other instead of stacking on top of one another, especially when viewed on a mobile device where the navbar takes up a significant portion of the screen? Below ...
Can you help me align the "Format Example" string with the textual labels of the input fields without using static width in AngularJS with Bootstrap? The current alignment is right-justified but I would like it to be more dynamic as shown in the screenshot ...
Upon arriving at the homepage, simply click on the sign-in button. Once redirected back to the home page, you will notice a personalized greeting saying 'Welcome [user]'. Wondering how to achieve this? It's as simple as changing the text fro ...
I am struggling with a simple HTML page that is working well with CSS, but encountering an issue where the input form gets placed above the header when scrolling down. I want the header to always remain above the content even while scrolling. Any suggesti ...
I'm having trouble adding padding to the home section div and I can't seem to access it using either the id or class. Any suggestions on how to solve this issue would be greatly appreciated. Below is the CSS code: body { margin: 0 ; font ...
I am facing an issue with setting a click event on anchor tags in my WordPress site. Surprisingly, the event works perfectly fine on all of my devices including PC, Android phone, and tablet except for my iPhone. Despite trying to set the 'Cursor&apo ...
I struggle with html/css, so I could really use some assistance. Here's a fiddle of a table link to fiddle. The td rows are currently the same width, but I want to set specific widths for each column - 200px for the left column and 50px for the right ...
I have been working on a login page that looks good on desktop and laptop devices. However, I am facing an issue with its display on mobile devices. The design appears differently on various mobile devices - for instance, it looks acceptable on an iPhone 1 ...
I am struggling with an SVG graphic that I have created. Here is the code: <svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" s ...
I am facing an issue with pushing my menu along with the content to the right. The JS code I have is not working as expected. When I click on <div class="menu-btn toggle"></div>, the menu does not trigger. Can someone help me understand why thi ...
Within Bootstrap 5.2, the grid system's breakpoints are determined by the width of the screen through @media. While this approach works well for most cases, it becomes challenging when dealing with nested grids. In my current project, I am utilizing ...
As you reduce the browser window size, you may notice a different layout designed specifically for iPhone. One question that arises is how to add a button next to the search text box dynamically using JavaScript. The issue at hand is that the text box is b ...
I'm currently working on an image gallery project and have encountered a problem. When all the image labels are of the same length, they align perfectly. However, if the label is longer than one line, it causes the image to move up instead of creating ...
I'm having an issue with my navbar on my website. I used CSS and jQuery to keep it fixed at the top, but now when I click on a menu item, it doesn't scroll to that section of the page. Can anyone help me troubleshoot this problem? ...
To complete the task, utilize the Material UI outlined input field (TextField component from "@material-ui/core": "^4.12.2",) and apply a custom blue color style to it. Here is the outcome of my work: https://i.sstatic.net/lw1vC.png C ...