Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. ASP.NET
  4. Apply style to div tag.

Apply style to div tag.

Scheduled Pinned Locked Moved ASP.NET
helptutorial
11 Posts 3 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • V Offline
    V Offline
    varshavmane
    wrote on last edited by
    #1

    Hi All, I am creating div at runtime and I have to apply style to it but I am not getting how to do it. I have created div tag like this: HtmlGenericControl divtest = new HtmlGenericControl(); and now I want to apply the following style: text-align: right; display: none; overflow: auto; scrollbar-face-color : #ffffff; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #cccccc; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #cccccc; scrollbar-track-color : #cccccc; scrollbar-arrow-color : #000000; Please help me with this... Thanks in advance...

    I S 2 Replies Last reply
    0
    • V varshavmane

      Hi All, I am creating div at runtime and I have to apply style to it but I am not getting how to do it. I have created div tag like this: HtmlGenericControl divtest = new HtmlGenericControl(); and now I want to apply the following style: text-align: right; display: none; overflow: auto; scrollbar-face-color : #ffffff; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #cccccc; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #cccccc; scrollbar-track-color : #cccccc; scrollbar-arrow-color : #000000; Please help me with this... Thanks in advance...

      I Offline
      I Offline
      Imran Khan Pathan
      wrote on last edited by
      #2

      ASP.NET 2.0 wrote:

      now I want to apply the following style:

      divtest.Attributes.Add("style","text-align: right;display: none;overflow: auto;........... ");

      bEst rEgard pAthan

      please don't forget to vote on the post that helped you.

      V 1 Reply Last reply
      0
      • V varshavmane

        Hi All, I am creating div at runtime and I have to apply style to it but I am not getting how to do it. I have created div tag like this: HtmlGenericControl divtest = new HtmlGenericControl(); and now I want to apply the following style: text-align: right; display: none; overflow: auto; scrollbar-face-color : #ffffff; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #cccccc; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #cccccc; scrollbar-track-color : #cccccc; scrollbar-arrow-color : #000000; Please help me with this... Thanks in advance...

        S Offline
        S Offline
        SHatchard
        wrote on last edited by
        #3

        If you are adding styles I would suggest using a CSS class rather than explicity adding it in code, it makes it more managable and reusable divtest.attributes.add("class", "myclass") and then define in a CSS file myclass with the attributes you want div.myclass { text-align: right; display: none; overflow: auto; scrollbar-face-color : #ffffff; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #cccccc; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #cccccc; scrollbar-track-color : #cccccc; scrollbar-arrow-color : #000000; } It also means you dont have to recompile if you need to make changes. However, if you do need to apply it directly in code for some reason then i would suggest using the built in style property which can be strongly typed which is always nice, as follows divtest.Style.Add(HtmlTextWriterStyle.TextAlign, "right") or for ones which are not included in the strongly typed list use divtest.Style.Add("scrollbar-face-color", "#000000") Hope that helps

        V 1 Reply Last reply
        0
        • I Imran Khan Pathan

          ASP.NET 2.0 wrote:

          now I want to apply the following style:

          divtest.Attributes.Add("style","text-align: right;display: none;overflow: auto;........... ");

          bEst rEgard pAthan

          please don't forget to vote on the post that helped you.

          V Offline
          V Offline
          varshavmane
          wrote on last edited by
          #4

          Thanks for the reply sir, but its not working. I have to actually show this div tag on onmouseover so I am using Ajax HoverMenuExtender which is also created runtime. The problem is that I am having GridView control which is created runtime and there are 2 Template column and others are BoundField Columns. Template Column is Checkbox and Linkbutton column and on the linkbutton mouseover I have to show the summary. I dont know where I have going wrong??? Thanks again...

          I 1 Reply Last reply
          0
          • S SHatchard

            If you are adding styles I would suggest using a CSS class rather than explicity adding it in code, it makes it more managable and reusable divtest.attributes.add("class", "myclass") and then define in a CSS file myclass with the attributes you want div.myclass { text-align: right; display: none; overflow: auto; scrollbar-face-color : #ffffff; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #cccccc; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #cccccc; scrollbar-track-color : #cccccc; scrollbar-arrow-color : #000000; } It also means you dont have to recompile if you need to make changes. However, if you do need to apply it directly in code for some reason then i would suggest using the built in style property which can be strongly typed which is always nice, as follows divtest.Style.Add(HtmlTextWriterStyle.TextAlign, "right") or for ones which are not included in the strongly typed list use divtest.Style.Add("scrollbar-face-color", "#000000") Hope that helps

            V Offline
            V Offline
            varshavmane
            wrote on last edited by
            #5

            Thanks for the reply sir, but its not working. I have to actually show this div tag on onmouseover so I am using Ajax HoverMenuExtender which is also created runtime. The problem is that I am having GridView control which is created runtime and there are 2 Template column and others are BoundField Columns. Template Column is Checkbox and Linkbutton column and on the linkbutton mouseover I have to show the summary. I dont know where I have going wrong??? Thanks again...

            S 1 Reply Last reply
            0
            • V varshavmane

              Thanks for the reply sir, but its not working. I have to actually show this div tag on onmouseover so I am using Ajax HoverMenuExtender which is also created runtime. The problem is that I am having GridView control which is created runtime and there are 2 Template column and others are BoundField Columns. Template Column is Checkbox and Linkbutton column and on the linkbutton mouseover I have to show the summary. I dont know where I have going wrong??? Thanks again...

              I Offline
              I Offline
              Imran Khan Pathan
              wrote on last edited by
              #6

              Ok. tell me where have you used my code? please post your bEst rEgard pAthan

              please don't forget to vote on the post that helped you.

              V 1 Reply Last reply
              0
              • V varshavmane

                Thanks for the reply sir, but its not working. I have to actually show this div tag on onmouseover so I am using Ajax HoverMenuExtender which is also created runtime. The problem is that I am having GridView control which is created runtime and there are 2 Template column and others are BoundField Columns. Template Column is Checkbox and Linkbutton column and on the linkbutton mouseover I have to show the summary. I dont know where I have going wrong??? Thanks again...

                S Offline
                S Offline
                SHatchard
                wrote on last edited by
                #7

                Both sets of code provided as answers will work, and are valid ways of doing it, but you seem to have a specific implementation issue here. Can you please just let me know what the issue is that you are having - does the div show? Is it just missing the style information?

                V 1 Reply Last reply
                0
                • S SHatchard

                  Both sets of code provided as answers will work, and are valid ways of doing it, but you seem to have a specific implementation issue here. Can you please just let me know what the issue is that you are having - does the div show? Is it just missing the style information?

                  V Offline
                  V Offline
                  varshavmane
                  wrote on last edited by
                  #8

                  No I can see the style when I right click view source. The problem is I have to show this div tag only on mouse over div its showing all. here is the code: I have create a class GridViewTemplate public class GridViewTemplate: System.Web.UI.Page, ITemplate { ListItemType templateType; string columnName; private Int32 RowItems; ArrayList arrgvCompanyName; public GridViewTemplate(ListItemType type, string colname) { templateType = type; columnName = colname; } public GridViewTemplate(ListItemType type, string colname, ArrayList gvCompanyName) { templateType = type; columnName = colname; arrgvCompanyName = gvCompanyName; } public void InstantiateIn(System.Web.UI.Control container) { Literal lc = new Literal(); LinkButton lb = new LinkButton(); CheckBox chk = new CheckBox(); TextBox tb1 = new TextBox(); AjaxControlToolkit.HoverMenuExtender hme2 = new AjaxControlToolkit.HoverMenuExtender(); Panel PopupMenu = new Panel(); HtmlGenericControl divtest = new HtmlGenericControl(); HtmlImage imgTop = new HtmlImage(); HtmlImage imgBottom = new HtmlImage(); switch (templateType) { case ListItemType.Header: lc.Text = "" + columnName + ""; if (columnName == "CheckAll") { container.Controls.Add(chk); } container.Controls.Add(lc); break; case ListItemType.Item: //container.Controls.Add(tb1); if (columnName == "CheckAll") { container.Controls.Add(chk); } //else if(columnName="CompanyName") //{ //} else { if (arrgvCompanyName.Count > 0) { columnName = arrgvCompanyName[RowItems].ToString(); lb.Text = columnName; lb.CommandName = "cmd"; hme2.TargetControlID = "lb"; hme2.PopupControlID = "PopupMenu"; //hme2.PopupPosition = Center; hme2.OffsetX = 60; hme2.OffsetY = -15; hme2.PopDelay = 10;

                  S 1 Reply Last reply
                  0
                  • I Imran Khan Pathan

                    Ok. tell me where have you used my code? please post your bEst rEgard pAthan

                    please don't forget to vote on the post that helped you.

                    V Offline
                    V Offline
                    varshavmane
                    wrote on last edited by
                    #9

                    No I can see the style when I right click view source. The problem is I have to show this div tag only on mouse over div its showing all. here is the code: I have create a class GridViewTemplate public class GridViewTemplate: System.Web.UI.Page, ITemplate { ListItemType templateType; string columnName; private Int32 RowItems; ArrayList arrgvCompanyName; public GridViewTemplate(ListItemType type, string colname) { templateType = type; columnName = colname; } public GridViewTemplate(ListItemType type, string colname, ArrayList gvCompanyName) { templateType = type; columnName = colname; arrgvCompanyName = gvCompanyName; } public void InstantiateIn(System.Web.UI.Control container) { Literal lc = new Literal(); LinkButton lb = new LinkButton(); CheckBox chk = new CheckBox(); TextBox tb1 = new TextBox(); AjaxControlToolkit.HoverMenuExtender hme2 = new AjaxControlToolkit.HoverMenuExtender(); Panel PopupMenu = new Panel(); HtmlGenericControl divtest = new HtmlGenericControl(); HtmlImage imgTop = new HtmlImage(); HtmlImage imgBottom = new HtmlImage(); switch (templateType) { case ListItemType.Header: lc.Text = "" + columnName + ""; if (columnName == "CheckAll") { container.Controls.Add(chk); } container.Controls.Add(lc); break; case ListItemType.Item: //container.Controls.Add(tb1); if (columnName == "CheckAll") { container.Controls.Add(chk); } //else if(columnName="CompanyName") //{ //} else { if (arrgvCompanyName.Count > 0) { columnName = arrgvCompanyName[RowItems].ToString(); lb.Text = columnName; lb.CommandName = "cmd"; hme2.TargetControlID = "lb"; hme2.PopupControlID = "PopupMenu"; //hme2.PopupPosition = Center; hme2.OffsetX = 60; hme2.OffsetY = -15; hme2.PopDelay = 10;

                    1 Reply Last reply
                    0
                    • V varshavmane

                      No I can see the style when I right click view source. The problem is I have to show this div tag only on mouse over div its showing all. here is the code: I have create a class GridViewTemplate public class GridViewTemplate: System.Web.UI.Page, ITemplate { ListItemType templateType; string columnName; private Int32 RowItems; ArrayList arrgvCompanyName; public GridViewTemplate(ListItemType type, string colname) { templateType = type; columnName = colname; } public GridViewTemplate(ListItemType type, string colname, ArrayList gvCompanyName) { templateType = type; columnName = colname; arrgvCompanyName = gvCompanyName; } public void InstantiateIn(System.Web.UI.Control container) { Literal lc = new Literal(); LinkButton lb = new LinkButton(); CheckBox chk = new CheckBox(); TextBox tb1 = new TextBox(); AjaxControlToolkit.HoverMenuExtender hme2 = new AjaxControlToolkit.HoverMenuExtender(); Panel PopupMenu = new Panel(); HtmlGenericControl divtest = new HtmlGenericControl(); HtmlImage imgTop = new HtmlImage(); HtmlImage imgBottom = new HtmlImage(); switch (templateType) { case ListItemType.Header: lc.Text = "" + columnName + ""; if (columnName == "CheckAll") { container.Controls.Add(chk); } container.Controls.Add(lc); break; case ListItemType.Item: //container.Controls.Add(tb1); if (columnName == "CheckAll") { container.Controls.Add(chk); } //else if(columnName="CompanyName") //{ //} else { if (arrgvCompanyName.Count > 0) { columnName = arrgvCompanyName[RowItems].ToString(); lb.Text = columnName; lb.CommandName = "cmd"; hme2.TargetControlID = "lb"; hme2.PopupControlID = "PopupMenu"; //hme2.PopupPosition = Center; hme2.OffsetX = 60; hme2.OffsetY = -15; hme2.PopDelay = 10;

                      S Offline
                      S Offline
                      SHatchard
                      wrote on last edited by
                      #10

                      From looking at the code the obvious is that you are not setting the ID property of the panel which you want to show, you are setting TargetPopupId to be 'PopupMenu' but that is the name of the object, not the Id of the control which you want to use, try adding the line PopupMenu.Id = "PopupMenu" It is not the div which you are trying to hide or display on the mouseover but the panel also, the div is just a control within the panel. Really you should set the Id property for all controls you add on the page, especially if they are containers. Also im not sure what the default is but you should perhaps specifty the type of generic html control in the constuctor HtmlGenericControl divtest = new HtmlGenericControl("Div");

                      V 1 Reply Last reply
                      0
                      • S SHatchard

                        From looking at the code the obvious is that you are not setting the ID property of the panel which you want to show, you are setting TargetPopupId to be 'PopupMenu' but that is the name of the object, not the Id of the control which you want to use, try adding the line PopupMenu.Id = "PopupMenu" It is not the div which you are trying to hide or display on the mouseover but the panel also, the div is just a control within the panel. Really you should set the Id property for all controls you add on the page, especially if they are containers. Also im not sure what the default is but you should perhaps specifty the type of generic html control in the constuctor HtmlGenericControl divtest = new HtmlGenericControl("Div");

                        V Offline
                        V Offline
                        varshavmane
                        wrote on last edited by
                        #11

                        Thanks for the reply sir but I have tried that also, but its not working... :(

                        1 Reply Last reply
                        0
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        • Login

                        • Don't have an account? Register

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • World
                        • Users
                        • Groups