locked
How to modify the CSS in an ASCX file. RRS feed

  • Question

  • User796787171 posted

     Good evening ASP experts,

    I have created a control, an ASCX file, and created several properties so that I can change the text of several lavels in the control.  This is all working well.  My problem is that I need to add a property to change the location of the control on the webpage.  The control is wrapped in a <div> and its CSS has ; top:0px: left:0px.  this locks the control in the upper left corner of the webpage.  I don't know how to add a property that will let me modify the top and left values.  Any assistance would be greatly appreciated.

    Here is the control:

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="NumberFamily.ascx.vb"
        Inherits="UserControls_NumberFamily" %>
    <style type="text/css">
        .family 
        {
            font-family: Symbol;
            font-size: 80px;
            ;
            top: 0px;
            left: 0px;
        }
        .op1
        {
            ;
            z-index: 1;
            left: 45px;
            top: -8px;
            text-align: center;
            width: 70px;
        }
        .op2
        {
            ;
            z-index: 1;
            left: 185px;
            top: -8px;
            text-align: center;
            width: 70px;
        }
        .rslt
        {
            ;
            z-index: 1;
            left: 115px;
            top: 120px;
            text-align: center;
            width: 70px;
        }
        .oper
        {
            ;
            z-index: 1;
            left: 115px;
            top: 45px;
            text-align: center;
            font-weight: bold;
            font-family: Symbol;
            width: 70px;
        }
        .img
        {
            ;
            top: 0px;
            left: 0px;
        }
        .lbl
        {
            width: 70px;
            font-size: 70px;
        }
    </style>
    <div id="Family" class="family">
        <div id="Labels" class="lbl">
            <asp:Label ID="lbl1" runat="server" Text="a" CssClass="op1"></asp:Label>
            <asp:Label ID="lbl2" runat="server" Text="a" CssClass="op2"></asp:Label>
            <asp:Label ID="lbl3" runat="server" Text="a" CssClass="rslt"></asp:Label>
            <asp:Label ID="lbl4" runat="server" Text="a" CssClass="oper"></asp:Label>
        </div>
        <asp:Image ID="img1" runat="server" CssClass="img" ImageUrl="~/UserControls/Famly.png" />
    </div>
    

    and the code behind.
    Imports System.Drawing
    
    Partial Class UserControls_NumberFamily
        Inherits System.Web.UI.UserControl
    
        ''' <summary>
        ''' This control displays either an Addition or Multiplication family.  The family consists of 2 operands,
        ''' a resultant and an operation, either addition or multiplication. The operands and resultant are strings
        ''' that can be read or written as control properties.
        ''' </summary>
        ''' <remarks></remarks>
        ''' 
    
        Enum FamilyType
            Addition
            Multiplication
        End Enum
    
        Dim Mult As String = "´"
        Dim Plus As String = "+"
        Dim _Location As Point = New Point(0, 0)
    
        ''' <summary>
        ''' Reads and Writes the value of Operand1.
        ''' </summary>
        ''' <value></value>
        ''' <returns></returns>
        ''' <remarks></remarks>
        Public Property Operand1() As String
            Get
                Return lbl1.Text
            End Get
            Set(ByVal value As String)
                lbl1.Text = value
            End Set
        End Property
    
        ''' <summary>
        ''' Reads and Writes the value of Operand2.
        ''' </summary>
        ''' <value></value>
        ''' <returns></returns>
        ''' <remarks></remarks>
        Public Property Operand2() As String
            Get
                Return lbl2.Text
            End Get
            Set(ByVal value As String)
                lbl2.Text = value
            End Set
        End Property
    
        ''' <summary>
        ''' Reads and Writes the value of the Resultant.
        ''' </summary>
        ''' <value></value>
        ''' <returns></returns>
        ''' <remarks></remarks>
        Public Property Resultant() As String
            Get
                Return lbl3.Text
            End Get
            Set(ByVal value As String)
                lbl3.Text = value
            End Set
        End Property
    
        ''' <summary>
        ''' Reads and Writes the value of Operation.
        ''' </summary>
        ''' <value></value>
        ''' <returns></returns>
        ''' <remarks></remarks>
        Public Property Operation() As FamilyType
            Get
                If lbl4.Text = Plus Then
                    Return FamilyType.Addition
                Else
                    Return FamilyType.Multiplication
                End If
            End Get
            Set(ByVal value As FamilyType)
                If value = FamilyType.Addition Then
                    lbl4.Text = Plus
                Else
                    lbl4.Text = Mult
                End If
            End Set
        End Property
    
        ''' <summary>
        ''' Reads and writes the Location of the NumberFamily control
        ''' </summary>
        ''' <value>Location as a point</value>
        ''' <returns></returns>
        ''' <remarks></remarks>
        Public Property Location() As Point
            Get
                Return _Location
            End Get
            Set(ByVal value As Point)
                _Location = value
                ' *** what goes here to modify the CSS?
            End Set
        End Property
    
        Public WriteOnly Property Op1Color() As Color
            Set(ByVal value As Color)
                lbl1.ForeColor = value
            End Set
        End Property
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not Page.IsCallback Then
            End If
        End Sub
    End Class
    

     

    Thursday, September 10, 2009 11:51 PM

Answers

  • User235168180 posted

    GrandpaB,

    OnPreRender is an event in the life cycle of a ASP.NET page.  So, in your code behide you would want the following:


    protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
    
            Family.Style.Add("position", "absolute");
            Family.Style.Add("top", "200px");
            Family.Style.Add("left", "200px");
        }


    To better understand, here is a link to more info on the page's life cycle:  http://msdn.microsoft.com/en-us/library/ms178472.aspx

    Let me know if that doesn't do it for you.  Also, remove the onprerender="position... from your div, you don't want that.

    - Matti


    protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            Family.Style.Add("position", "absolute");
            Family.Style.Add("top", "200px");
            Family.Style.Add("left", "200px");
        }



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 11, 2009 8:19 PM

All replies

  • User312496708 posted

    Add a propertyvto the calss, In the set of the property in addition to writing the value to a variable also chnage the style proiperty of the control.

    Friday, September 11, 2009 12:05 AM
  • User796787171 posted

     Thank you for your response.  You have identified the problem that I'm having.  How do I change the style property.  As you can see in my thread starting post I am looking for assistance on how to accomplish this.  In the code-behind, after setting the valus of the property, I have a comment about what should follow.

    Friday, September 11, 2009 8:31 AM
  • User235168180 posted

    GrandpaB,

    Here is one way to do what you are trying to accomplish:

    1.  Add runat="server" on your div with the id "Family"

    2.  On Prerender set the style attribute on the Family div to "; top: [your top]; left: [your left]"

    HTH,

    Matti

    Friday, September 11, 2009 10:39 AM
  • User796787171 posted

     Matti,

    Thanks for your assistance; I'm afraid that I need more hand holding.  Adding runat="server" to the <div> with id="Family" seemed to be straight forward.  I tried to also add onprerender="; top: 200px; left: 200px" to the <div> caused the compiler to whine bitterly.  I thought I might have misunderstood your instructions so I attempted to add a prerender event handler to the ASCX code.  This also was fraught with difficulty.  Here is the <div> in question:

    <div id="Family" class="family" runat="server" onprerender="; top: 200px; left: 200px" >
        <div id="Labels" class="lbl">
            <asp:Label ID="lbl1" runat="server" Text="a" CssClass="op1"></asp:Label>
            <asp:Label ID="lbl2" runat="server" Text="b" CssClass="op2"></asp:Label>
            <asp:Label ID="lbl3" runat="server" Text="c" CssClass="rslt"></asp:Label>
            <asp:Label ID="lbl4" runat="server" Text="+" CssClass="oper"></asp:Label>
        </div>
        <asp:Image ID="img1" runat="server" CssClass="img" ImageUrl="~/UserControls/Famly.png" />
    </div>

    I have tried to find other references,but have come up short.  Any further assistance would be greatly appreciated.

    In addition to the above problem, I have done additional damage to the web page.  When I first created the thread, I was able to cause the new component to render to different positions by changing the top and left parameters in the .family style.  That is no longer true.  If top and left are set to 0px the control renders in the upper left corner of the web page, otherwise it renders inline with the page content.  I'm sure that I've done something stupid; I'm working on it.  

    Friday, September 11, 2009 4:08 PM
  • User235168180 posted

    GrandpaB,

    OnPreRender is an event in the life cycle of a ASP.NET page.  So, in your code behide you would want the following:


    protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
    
            Family.Style.Add("position", "absolute");
            Family.Style.Add("top", "200px");
            Family.Style.Add("left", "200px");
        }


    To better understand, here is a link to more info on the page's life cycle:  http://msdn.microsoft.com/en-us/library/ms178472.aspx

    Let me know if that doesn't do it for you.  Also, remove the onprerender="position... from your div, you don't want that.

    - Matti


    protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            Family.Style.Add("position", "absolute");
            Family.Style.Add("top", "200px");
            Family.Style.Add("left", "200px");
        }



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 11, 2009 8:19 PM
  • User796787171 posted

     Matti,

    Thanks for the assistance that solved my problem.  Now one additional question, can you recommend a good reference that contains this sort of information.? I subscribe to Safari and have been using ASP.Net 3.5 Unleashed, but did not find how to modify the CSS.

    Saturday, September 12, 2009 10:47 PM
  • User235168180 posted

    GrandpaB,

    I'd suggest going through the CSS tutorials on w3schools.com, here is the link below.

    http://w3schools.com/css/default.asp

    HTH,

    Matti

    Sunday, September 13, 2009 1:46 AM