I have a Skin File that contains:
< asp:TextBox runat="server" CssClass="FixedFont"/>
In the same folder as the Skin file, is the following css file. The Css file contains:
.FixedFont
{
font-family:Courier;
}
Lastly, I have an ASPX page which contains the following control:
<asp:TextBox ID="TextBox1" runat="server">Test</asp:TextBox>
When I view the ASPX page in design mode or run the page, I see that the font-family attribute on the style does effect the textbox control, namely, it is changed to Courier.
However, what I would also like to do is to define a local style on my ASPX page,
.DefaultWidth
{
width: 300px;
}
...and have all of my TextBoxes so that they are the same width.
If I set the CssClass property of TextBox1 to "DefaultWidth"...
<asp:textbox ID="TextBox1" CssClass="DefaultWidth">Hello</asp:TextBox>
...the width of the textbox is changed to 300px but I lose the effect of the skin appling the fix font Courier style.
To get BOTH effects to be applied, the DefaultWidth and the fixed font textbox effect, I have to set the CSSClass property to "DefaultWidth FixedFont", which to me, seems like it defeats the advantage of having the skin in the first place. I guess I expected the effect to be CUMULATIVE, unless I added a style that conflicted with the SKIN, in which case, I expected the local class to be applied over the skin's effect. For example, If I applied a second class, Class2, that also included a font-family specification in addition to other effects, I would expect the font specified in Class2 to override that in the FixedFont style. But that doesn't appear to be what is going on here.
What is the best way to manage such a situation? I imagine very often wanting to have a series of textboxes that all match in width, so I imagine that I will very often want to specify a CssClass on a control in addition to using the effects applied to the control in type in the skin file.
Is the solution NOT to use CSS in the SKIN itself? This seem like it has disadvantages, too, on the side of maintenance.
A secondary problem that I am having is that if I declare a stylesheet with the following class..
.Button
{
background-image: url('/images/button.gif')
}
...and set the CSSClass property of an ASP Button to "Button", I see the image tiled over the button.
However, if I enter the following code in the skin file
it does not find the image.
The images folder is a first-levl folder off of the root of the website.
Any idea why it is not picking up the image. I;'ve tried various other paths, but that is the only one that seems to make sense to me.
By the way, the image is applied in design mode, but it disappears when ity is run.
I don't know if I understood your question but as I'm seeing from here, what you should have to declare this in your "local" style:
textbox.fixedfont { width:200px; }
or simply to every textbox if you are sure about affecting every textbox with the same width, doesn't matter the skin...
textbox { width:200px; }
If this not what you were asking for, please be clearer.
Related
I have a stacked chart component (from the MS Chart Control Library) on a c#.net webform which I created by dragging the control onto the design surface. I then edited the source html (.aspx page) to give the element a css class and remove the style attribute that was there originally. This was so that I could control the style from the css file instead of using embedded styling. Here is the html:
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" CssClass="smallBarChart"
IsMapAreaAttributesEncoded="True">
In the site.css file, I have specified the following:
.smallBarChart
{
width: 350px;
height: 230px;
}
When I run the web-app, the html that is rendered for the chart component has an "alt style" attribute added in. Even though it has the correct class attribute it is using the information contained in the "style" attribute. Why is this "style" attribute being generated by .net??. I have taken all style attribute info out of the original aspx file.
I don't have any instructions to change the style in my code behind (.cs) file
<img id="Chart1" class="smallBarChart" src="/Charts/ChartImg.axd?i=chart_2c39400223fb4933bf5a99e05d6119d4_3.png&g=b5c73578558442d3b9e1dd54cc127f20" alt="" style="height:300px;width:300px;border-width:0px;">
I should emphasise that I need to control the style of the chart component from my site.css file so any suggestions around using inline styling are not an option for me. Inline styling (adding a style attribute to a html element) is bad practice in any case!!!
I don't know why ASP.NET is overriding your work, but try this in your CSS:
.smallBarChart
{
width: 350px !important;
height: 230px !important;
}
Good Luck!
Set your chart's dimensions (Width/Height) at design time:
<asp:Chart Height="Unit" Width="Unit" ID="Chart1" runat="server" DataSourceID="SqlDataSource1" CssClass="smallBarChart" IsMapAreaAttributesEncoded="True">
Im beginning to think the answer to this is that because the .net runtime generates the html necessary to build the chart at runtime and because it transforms "Chart1" from an element into an element so that the browser can understand it, it will insert its own style attributes at runtime (even if I remove this in the .aspx file, the properties window shows 300px x 300px by default).
This being the case, it seems pointless assign a cssClass to the control since any matched CSS rule will be overridden by the inline style that .net gives the element when the HTML is served up (which is always 300 x 300px in my case for some reason.
In other words, I can not specify the width and height of an asp.net control in a separate css file because asp.net will ALWAYS give it its own style attribute at runtime.
The reason I posted this question is that I want to define the size of what I call a "Small Bar Chart" in the web site's CSS file so that if I have 10, 15 or 20 of these small barcharts on a page, I can resize them all. I guess the way to do this in .net is to create a custom control that is the right size since it wont let you control its style from a CSS file.
I encountered a similar problem using .net chart control and Zurb foundation, and we want our image to scale in a responsive layout. Zurb does a great job of that but really needs no width or height set on the image.
Unfortunately with the width and height are set on the image tag via the style attribute. We found that scaling was only performed on the width of our charts but the height remained the same. So, without proportional scaling our charts could look a little squashed.
Our solution is to subclass the chart control, override the render method, get the base class to render html and then modify the html to remove styles. Doing this allowed the charts to scale themselves proportional to their container.
Here is our solution:
public class ChartWithNoDimensionsSpecified : Chart
{
//we override this because the child chart controls may throw an exception and we don't want that to take down our whole page!
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
try
{
//get the base control to render itself into our stringwriter
System.IO.StringWriter stringWriter = new System.IO.StringWriter();
System.Web.UI.HtmlTextWriter chartWriter = new System.Web.UI.HtmlTextWriter(stringWriter);
base.Render(chartWriter);
//get the html rendered and find the start and end of the style tag
//note we assume no spaces between the style attribute = and "
//we also assume the img tag is first and there are no tags before it with a style
string html = stringWriter.ToString();
int pos = html.IndexOf("style=\"",StringComparison.OrdinalIgnoreCase);
if (pos != -1)
{
int pos2 = html.IndexOf("\"", pos + 8);
//we only want this one style to be set in the tag itself.
string replaceStyleAttr = "border:0px;";
//write the image tag, excluding the existing styles but replaced with our own...
writer.Write(html.Substring(0, pos + 7) + replaceStyleAttr + html.Substring(pos2));
}
else //incase we could not find the style tag...
{
//write out the existing standard html. We could alternatively throw an error here.
writer.Write(html);
}
}
catch (Exception ex)
{
//if there is an error, write this output instead
writer.Write("<div title=\"The chart control could not be rendered. This may be related to configuration, permissions or IIS being confused about access to the temp chart images folder (exception: " + HttpUtility.HtmlAttributeEncode(ex.Message) + "). If the charts have otherwise worked ok, recycle the IIS app pool and stop/start the site\"><span style=\"color:#ff0000;\">Error</span> (hover for detail)</div>");
}
}
}
In our case the charts are generated grammatically in c# code, and so we don't use the asp.net designer. If you do, you may need to make some changes to this to use that in the designer.
When using Telerik controls if e.g. I don't specify a width for a textbox, telerik adds the inline attribute
style="width: 125px"
Is there a way to stop telerik adding default values like this?
(NOTE: This isn't a default of Removing all CSS from telerik controls, which is asking how to remove default stylesheets rather than inline styles)
Here are some solutions from Telerik:
How to Remove the Default Width of RadInput TextBoxes or Set it with External CSS
I'm not sure, but you could try searching through the stylesheet(s) to find a default width specification for inputs. aside from that, you might be able to override the attribute and set the width using !important.
<telerik:RadTextBox ID="RadTextBox1" runat="server" style="width:200px !important;" ... >
EDIT
Try adding a style like this to your page or stylesheet. This might not be 100%, but it should be close:
.RadInput .RadInput_Sunset { /* replace "_Sunset" with whatever skin you're using */
width: auto;
}
EDIT
If you only need to style one control, try this:
#ClientID_OF_INPUT {
width: auto !important;
}
Here's a my eventual implementation, which works for RadInput and RadComboBox. The function needs adapting for each control as telerik put styles in varying places.
function removeWidths (sender) {
//remove only the width style from the inline style collection
sender._originalTextBoxCssText && (sender._originalTextBoxCssText = sender._originalTextBoxCssText.replace(/(^|[^-])width\s?:\s?[\w|\.]+\s?;/i, "$1"));
sender.updateCssClass && sender.updateCssClass();
if(sender.constructor.__typeName == "Telerik.Web.UI.RadComboBox") {
$(sender._inputDomElement).closest(".RadComboBox").removeAttr("style");
}
},
Had the same issue and I'm not a particular fan of !important overrides or JavaScript solutions.
Digging into RadInputControl I could see that Unit.Pixel(160) is the default Width but only if the RenderMode of the control is not Lightweight, so switching to Lightweight removes the explicit inline width, otherwise if that's not an option for the RadTextbox I found that if you set the Columns property to 0 it only outputs
style="width:;"
This doesn't look valid to me, so I'm guessing that most browsers will ignore this, but I haven't tested it extensively myself.
Is there a simple way to change the default colors of controls in asp.net (VS2010). Specifically, every time a textbox is moused over or a submit button is clicked, they get light blue highlights or borders. This was fine until I made a light green site. Now it really does not match at all. Is there one simple place in VS2010 I can change this default color to green?
Thanks for any help....and yes I'm a noob!
Use CSS
If you're using a master page, just setup a default styles css file in the master page and set all of your css styles there, such as input, p, a, input[type="submit"], etc.
If you're not using a master page, define these in the .aspx pages
Here's a link to a CSS tutorial: http://www.w3schools.com/css/
If you don't provide CSS information for the controls in either a stylesheet, style tag or inline styles, then they will use the CSS as defined by the browser that you are using.
With that out of the way, you can style your controls in CSS based on their type:
input { ... }
input[type="text"] { ... }
input[type="submit"] { ... }
I'm writing a ServerControl in ASP.NET 3.5, and I'm exposing CssClass, so the user can manipulate the visual appearance of the control. My problem is that I want to establish reasonable defaults, so that the user doesn't have to configure CSS unless he wants to change the defaults.
My specific problem is that my control is emitting html divs, that need to display background images. I want the user to be able to specify a different image in CSS, but I want to display a default background image, and I can't make that work.
The entire server control is emitted as a div, with a class name set to the value the user provided in CssClass. The div that needs the background image is enclosed within this outer div, with a class name of its own. I am currently setting the background image in CSS on the page that contains the control:
<style type="text/css">
.cssClass .innerDiv {
background-image: url("http://....");
}
</style>
With this the proper image is drawn. But if it's not there, no image is drawn.
What I want is for the ServerControl to emit some CSS that will define these image urls, that would be over-ridden by any css that was added by the user, and for that default CSS to include URLs to images embedded in the ServerControl's assembly.
And I'm not sure of how to do either. Nor, for that matter, am I sure this is the best approach.
Any ideas?
Expose various properties with CSS classes, such as HeaderCssClass, ItemCssClass, if you need more than one style.
Also, you can do a check that if the user has a CSS class name specified, you use that; otherwise, use your default and omit the custom CSS from the control.
In your rendering logic, you can render the right CSS class name as the attribute of the DIV depending on whether the user has specified anything. So you can do:
if (this.HeaderCssClass != null)
writer.AddAttribute("class", this.HeaderCssClass);
else
writer.AddAttribute("class", "standard");
writer.RenderBeginTag("div");
And only write out your standard CSS if the HeaderCssClass is null.
I have a simple website with a master-page. To set properties to elements on a content page (such as Textbox) I use CSS. In designer it works well but when I launch a site a style isn't apllied to controls. The reason is simple. To say, I have a TextBox with id="TextBox1" in content page, it is placed in ContentPlaceHolder1. In CSS file I set properties for object with id #TextBox1. When I launch a site due to master page name mangling it gets an id like ctl00_ContentPlaceHolder1_TextBox1 which is not defined in CSS file included in masterpage.
What is a correct solution of this problem? Hardcoding mangled name doesn't seem to be good.
Use CssClass on the controls, like this: CssClass="myClass", then in your stylesheet instead of this:
#TextBox1 { /* styles */ }
You'd have this:
.myClass { /* styles */ }
It's worth noting that .Net 4 fixes, or allows you to better manage the ID generated in the html, see here for details.
As Nick and SLaks have both said classes are best. You can assign multiple classes in the class property and it will aggregate all the properties from all the classes specified overwrite any of the properties that it shares with earlier classes. The order of the classes definition in the css file sets the order that they get applied.
<style type="text/css">
.genericTextBox
{
background-color: #eee;
color: black;
}
.textbox1
{
background-color: #3ee;
font-size: larger;
}
</style>
<asp:TextBox id="textBox1" CssClass="textbox1 genericTextBox" runat="server"></asp:TextBox>
The order the styles get applied is first genericTextBox, because its the first defined in the style (essentially the order in class gets ignored). It sets the color and the background-color, then the style textbox1 gets applied and it overwrites the background-color and adds font-size to. So in the end you end with the color from generictextbox, the background-color and font-size from textbox1.
EDIT: on the TextBox changed class to CssClass
The simplest solution is to apply your CSS rules using classnames (Which don't get mangled) instead of IDs.
The correct solution is to use the ClientID property, which returns the mangled ID.
For example:
.Something #<%=TextBox1.ClientID %>` {
color: red;
}
However, you can only do that for inline stylesheets.