locked
How to find what attributes are in a CSS file that is being loaded in a custom control? RRS feed

  • Question

  • User-1833052282 posted

    I currently have a composite control which contains a ListView that I set the borders very specifically to create a nice looking tab menu.  If I set the style properties manually in the web form for my custom control I can see them fine in the .Style property and dispense them accordingly into the child controls.  My problem is when I set a CSS class, the .Style property doesnt get filled with the correct settings - leaving my child controls helpless.

    So my question is, how do I see the CSS attributes to fill in the child controls?

     

    Note:  I would like in the CSS class to set the border attribute and I tell the children how to react.  Foreinstance I have panels inside of cells of the ListView that when selected the bottom border disappears.  I also have borders of separators(in between tabs) set to a border-left.  So when the user of the web control sets "border: solid 1px Black" I want to make sure thats all he/she has to set instead of manually setting the bottom border here, and the left border there.  I basically want them to go, hey I want to set all the borders to ..., so lets just go ahead and set the border attribute.  In order to do this I figured I had to do it manually, but I also want them to be able to use CSS...

     

    I hope this hasnt been answered before, but I couldnt turn anything up on searching.

     

    Thanks!

    --Brad

    Wednesday, June 25, 2008 2:54 PM

Answers

  • User543031324 posted

    I understand what you are trying to do, but It won't work. The css file is not parsed by ASP.NET. CSS and ASP.NET are separate technologies. The Style property on an ASP.NET control just renders the "style" attribute on the HTML element it produces. It can be accessed becuase you would explicitly set the Properties of the Style object on your ASP.NET control. When you use a .css style sheet and set the CssClass property on a ASP.NET control it just renders the "class" attribute on the HTML element it produces and does not look into the .css file. It would not even know where to look for the style you specified. CSS will allow multiple entries in the style sheet file for the same class and ASP.NET would not know which style you want. The only way that I can think of doing this would be that the user specifically sets the Style properties on your custom control and not use a .css style sheet. If you take a look at the GridView or any other control with lots of styling, you have to set each one of the properties (RowStyle, HeaderStyle, etc) to get the style you want. Hope that shines some light on what you are trying to do.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 26, 2008 7:41 AM

All replies

  • User543031324 posted

    When set the property CssClass it justs renders a class="myclass" to the browser. It does not look up the style sheet and parse it to find the styles and assign them to the Style object. The way to do this is to set the CssClass to a class name and use selectors in your style sheet to produce the effect you want. Here is a tutorial on CSS http://www.w3schools.com/css/default.asp.

    Wednesday, June 25, 2008 3:25 PM
  • User-1833052282 posted

    The way to do this is to set the CssClass to a class name

     

     

    What do you mean by this?

     Also I have a CSS file already setup thats not the problem.  I need to have my childcontrols take on certain attributes of the CSS class and use them.  For isntance someone sets in the CSS file that the border should be "solid 1px Black" but my controls underneath cant just take that attribute and go with it because their borders are either border-left, border-right, border-bottom.  So I want to use those settings but for those borders.  I cannot find what it is set to since the CSS settings arent translated into the .Style property.  I dont want the user to have to know exactly what borders to set for each child object's style template.

    Wednesday, June 25, 2008 4:54 PM
  • User543031324 posted

    The CssClass is a property on the Control. For example when you use a GridView you have a RowStyle Property that has a CssClass Property. When you set this property the rendered ouput is <table><tr class="myClass"></tr></table>. What you are trying to do is not possible unles you can parse the css file yourself in your code and set what you need.

    Wednesday, June 25, 2008 4:58 PM
  • User-1833052282 posted

    ... unles you can parse the css file yourself in your code and set what you need.

     

     

    Well I have controls that are children of the main custom control I have created(CompositeControl), some of those children make up the cells(tabs) of a tab menu control i have created.  Those tabs or children are pushed against each other.  I can only set borders of each on certain edges so they look uniform and don't have double edge in between themselves or on the last/first tab.  So in order to do that I have to strictly set each child(templated) so this doesnt occur.  I dont want to have the user(person who places the control on their web form) to have know to set each border correctly.  Instead I would like the user to be able to simply drop the control on their web form and only have to set the CSS to "border: ... ... ..." and not have to set each border specifically.  This would make the user  have a much easier time at using the control and I would only have to change on place of code instead of numerous areas(duplicate code isnt favored by me).

    I used to take the style properties and copy them to the children, for instance if a panel were a non-selected tab it would have its border-bottom-style set to the parent's border. Essentially being child.border-bottom = parent.border.  If it were a selected tab then it would have a border-bottom-style: none.  This would allow the user to only have to put in "border: solid 1px Black", as an example...

    But, since CSS doesn't fill the Style property I cant simply tell it to use the border style on a border-bottom.  I know I can have multiple CSSs but they would still have to know which borders to "turn on".  I also want this in CSS, so the entire website if foreinstance it were to change colors, can all be changed in one place(the CSS file) instead of in multiple areas causing the user to go through all their tab menus and do it directly.

     Hope that clarifies some things?

     Thanks btw for the time and help...

    --Brad

    Wednesday, June 25, 2008 7:44 PM
  • User543031324 posted

    I understand what you are trying to do, but It won't work. The css file is not parsed by ASP.NET. CSS and ASP.NET are separate technologies. The Style property on an ASP.NET control just renders the "style" attribute on the HTML element it produces. It can be accessed becuase you would explicitly set the Properties of the Style object on your ASP.NET control. When you use a .css style sheet and set the CssClass property on a ASP.NET control it just renders the "class" attribute on the HTML element it produces and does not look into the .css file. It would not even know where to look for the style you specified. CSS will allow multiple entries in the style sheet file for the same class and ASP.NET would not know which style you want. The only way that I can think of doing this would be that the user specifically sets the Style properties on your custom control and not use a .css style sheet. If you take a look at the GridView or any other control with lots of styling, you have to set each one of the properties (RowStyle, HeaderStyle, etc) to get the style you want. Hope that shines some light on what you are trying to do.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 26, 2008 7:41 AM
  • User-1833052282 posted

     Yea it sure does, although not the answer I wanted heh.  I understand how CSS is rendered now.  Yea like the GridView I have made templates and Styles like they have them.  Only problem is the Styles need to have the borders strictly set which means that the user has to know which borders.  Basically the control looks nothing like a tab control when the borders arent setup correctly.  That is when setting the ItemStyle="" in the forming of the tag.  The other way which might be the one your talking about is where I have custom Styles setup and they can set each property of those under children tags from my custom object.

     All in all I was hoping that CSS could bring a way of not having to change attributes, wether it be colors, borders, fonts all over the place and give us one area to change everything.  I had really hoped their was a way for this.  But Ill go back to using my ItemStyle, SelectedItemStyle and so forth and make sure the users know what borders they have to strictly set.

     

    Hey thanks for you time awilinsk, I appreciate it very much.

     --Brad

    Thursday, June 26, 2008 12:50 PM
  • User543031324 posted

    That would be very nice if it would do that. After you get used to programming this way it's not bad.

    Thursday, June 26, 2008 12:58 PM
  • User-1833052282 posted

     heh Yea slowly but surely.  I cant stand duplicate code but it appears that web programming almost requires it.  But atleast im finding very quickly all the pitfalls heh :).  I also wish that there was one standard way of setting properties.  Meaning either in the CSS, in the Style property, custom Styles, or as direct properties.  There are way to many ways to set properties leaving the programmer creating the control to have to test for all of them(or all he can).  But hey its the best way out there right now and I guess ya gotta put up with it if ya wanna make some nice web programs :).

    Thursday, June 26, 2008 1:22 PM