Is there a way to set this kind of properties in css?
So I can use the same calendar and be more organized with my code
<asp:Calendar ID="Calendar1" runat="server" Height="189px" CssClass="Calendar"
ondayrender="CalendarRender" TitleStyle-BackColor="#00718F" TitleStyle-ForeColor="White" ShowGridLines="true" TitleStyle-BorderStyle="Solid" TitleStyle-BorderWidth="1px" TitleStyle-BorderColor="Black" SelectedDayStyle-ForeColor="#281dc9" SelectedDayStyle-Font-Bold="true" DayHeaderStyle-BorderColor="Black" DayHeaderStyle-BorderWidth="1px" DayHeaderStyle-BorderStyle="Solid"
onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
Assuming you're talking about properties such as:
TitleStyle-BackColor="#00718F" TitleStyle-ForeColor="White"
... etc..
Your best bet would be to render the calendar to a page, check its source and see what style it adds. You can then extract this out for use in CSS.
UPDATE
This page has some of the selector names for you, along with what they control ASP.Net Calendar Control Custom Theme Format using CSS
If you want to be more organized, and don't want your project to become like 'spaghetti' in future, use CSS file for css properties. Do not embed this properties in headers, unless this is the only way to solve current issue. This is bad for you, and for all who will work with your project.
I've met lot of legacy projects, wasting too much time to find why some dom element's behaviours differs from what I need.
Just specify CssStyle property in your aspx markup, and it will be mapped to real css class.
And add description for this class in css file.
Related
I want to add a bunch of classes to some text fields so i can get their values with jquery. This seems like standard practice when using jQuery and this post suggests it as the answer but how does this affect page loading? Won't it be trying to find all these classes? I have been told in the past to try minimise the amount of classes used on controls.
I have about 12 controls i'll want to add unique classes to to get their value. I am using asp.net so I can't use the id. I also can't use the ClientID as the controls are in a table (but only 1 set of controls will show at any one time).
e.g.
<asp:TextBox ID="txtValue1" runat="server" CssClass="value1" Text='value1' />
<asp:TextBox ID="txtValue2" runat="server" CssClass="value2" Text='value2' />
<asp:TextBox ID="txtValue3" runat="server" CssClass="value3" Text='value3' />
...
var value1 = $('.value1').val();
var value2 = $('.value2').val();
var value3 = $('.value3').val();
And none of the class names will exist in css.
Thanks
Edit:
I know this works but I was more curious about the affect it had on page loading. There was an answer (seems to be deleted now) that said something like the html parser ignores the classes. The css parser will only look at classes that are defined. So it sounds like it would be completely ignored and have no affect on page load. Is this right?
It is okay to use a CSS class that doesn't exist, but if they are unique you want to use id, not class.
You say you are using ASP.Net so you can't use the ID parameter, but you can. In JQuery you can get the controls using the below
var value1 = $('[ID$=yourID]').val();
For more info on JQuery Selectors check out: JQuery Selectors and Attribute Ends With Selector
The above selector basically finds the id ENDING in "yourID" so ignoring all the masterpages extra text at the start. You just have to make sure these are unique. e.g. don't have ids like "HSBC" and "SBC" as the above selector on "SBC" will find both.
I don't think it's a problem. The only times I've had problems with non-existant classes or ID's is one time I had an onclick reference an ID that didn't exist. This messed things up...Other than that I think classes are pretty harmless. I'd be interested to know though..
Any other thoughts??
Which version of asp.net are you using? In asp.net 4.0, you have the ability to use unmangled ids. It looks like the simplest solution would be to set ClientIDMode="Static" to all of your textboxes and then refer by id. Otherwise, sure, I've created classes that don't exist to refer to things.... all the time.
Edit: (in response to your comment about the effect page load).
I think your question about having extra classes in a div that are not currently used is not a bad question (at least in a theoretical sense), and I honestly don't know the precise answer. I do believe any effect is quite minuscule. If you consider best practices to write html, you generally write and structure the HTML, with it's classes, before you write the CSS. This means at the time you write the CSS, certainly some classes will not be used. Indeed, after styling the basic tags (body, h1, a, etc), you may find you never need to create selectors with those classes for some particular design. And yet for the next design, you might need those classes. I'm pretty sure the technology behind CSS was built with those kinds of scenarios in mind, and I bet millions if not billions of pages on the internet follow that exact scenario, especially if they use something like Modernizr, which adds classes to the html element of the page as a way of providing you classes you can select against considering the possible capabilities of the current browser. You may never need those classes, but they are there if you need them.
Long story short, dozens of pages use no master page. For a new module I created a master page with a menu control (menu control exists already) so I can get the same look across the six or so pages I'm creating now. Since the content page uses the master page, the Menu control has its name changed to ct100_Menu1 instead of just Menu1. Wouldn't be an issue except someone decided to use the exact name of the control for the CSS that styles the menu, by its exact ID (e.g. CSS is Menu1 a { /* stuff */ }). So the menu won't render properly because I'm using a Master Page and not just copying the code.
I cannot change the CSS code in the menu file as it could break something, so is there any way that I can change the control to not display that pesky ct100 without having to add any tools or mess with creating my own custom control (as I can't replace the Menu.ascx control, although I might be able to modify it to add CSS classes) or is my only choice to either not use a master page or copy the menu CSS into another file and set it properly?
Feel kind of stuck between a rock and a hard place because the code was deliberately written so you cannot use Master Pages and nobody ever went back to change it.
You should set the ClientIdMode to Static. Here's more information from MSDN. Note: This is .NET 4.0 only.
In earlier versions, I would recommend styling off of classes as you can't really control what the name will be everywhere that you use it (as you found out).
If you are on ASP.net 4.0, you can set the ClientID property of the controls.
Otherwise, you're in for a world of hurt as in: Custom Control, ASP.net Literals or JavaScript to change the IDs.
Are you using .NET 4? If so, you can set this on your control:
<asp:SomeControl ClientIDMode="Static" />
Just add the new name to the CSS - without removing the old (since you said that was an issue):
ctl100_Menu1 a,
Menu1 a { /* stuff */ }
If you are using ASP.NET 4.0, you can override the ClientId rendering mode, either per control, or for all controls. For instance:
<my:Menu runat="server" Id="Menu1" ClientIDMode="Static" />
This will enforce that the value "Menu1" is preserved as the client side Id for the element that is rendered. (see here).
What I would recommend though, is apply a CSS class to the menu element, and then adjust the CSS rules around a class. E.g.,:
#Menu1 a {
... to:
#Menu1 a,
div.menu a {
... etc
To "correct" this behavior for your entire web application, look in your web.config for the following tag:
<system.web>
...
<pages ... clientIDMode="*something*">
</pages>
...
</system.web>
Remove the clientIDMode="*something*" property specification. Just take it out.
Yay.
I've seen all of the usual pages with information about how to create a sub-tag that allows content within a user control (using ITemplate and INamingContainer) but I've yet to see anyone able to add properties that become attributes to said tags, for example:
<asp:MyControl runat="server" ID="myControlTest" SomeAttribute="SomeValue">
<Content ContentAttribute="Something">
Blah
</Content>
</asp:MyControl>
If you see the ContentAttribute on the Content tag, that is what I'd like to be able to achieve, but if I set it all up using ITemplate and INamingContainer etc, I can add a property that does in fact appear in Intellisense for that tag but when I run the code, it says Content does not have property/attribute named ContentAttribute (it also gives the same as a warning in VS IDE but still allows me to compile it).
I have tried everything to make this work and so far the only way seems to be if I make the Content property on MyControl a class that inherits from System.Web.UI.Control and implements ITemplate. That works but unfortunately I have to specify the runat attribute on the Content tag (because it sees it as a control rather than a sub-tag) and I'd rather not do that if possible.
Hope I have explained this well enough, if I haven't please let me know and I'll do my best to elaborate further.
Thanks in advance.
I think what you're proposing is something like a MIME email where there are a variable number of sections, each with an identifier for the client to choose the best version of the email it can handle. I assume you're wanting to select the appropriate template at runtime, based on that attribute.
The standard .NET controls don't implement that way, so far as I can tell. Think of the Repeater which has:
<asp:Repeater id="myRepeater" runat="server">
<HeaderTemplate>...</HeaderTemplate>
<ItemTemplate>...</ItemTemplate>
<FooterTemplate>...</FooterTemplate>
</asp:Repeater>
Each of the subitems (templates) has a different name, not the same name with a separate attribute.
Is there any way for you to define, ahead of time, what all of the possible sections might be, the way the repeater does?
<asp:MyControl runat="server" ID="myCtlTest">
<SomethingTemplate>Blah</SomethingTemplate>
<OtherTemplate>Blah</OtherTemplate>
</asp:MyControl>
I'm guessing not but wanted to throw it out there in case.
Alternately, could the ContentAttribute move to MyControl? The SETter would then load/build the template for you depending on the value.
<asp:MyControl runat="server" ID="myCtlTest" ContentAttribute="Something">
<Template></Template>
</asp:MyControl>
...or it could be loaded with a method instead of using the property SETter.
If you will always need multiple templates, perhaps a combination of those two concepts would help.
<asp:MyControl runat="server" ID="myControlTest"
SomethingTemplate="Something"
OtherTemplate="Other">
<SomethingTemplate></SomethingTemplate>
<OtherTemplate></OtherTemplate>
</asp:MyControl>
I want to apply custom css to my calendar control. I have applied the same at corresponding locations for e.g.
e.Cell.CssClass = "highlight";
clndrEvt.TodayDayStyle.CssClass = "currentDay";
clndrEvt.OtherMonthDayStyle.CssClass = "OOB";
clndrEvt.NextPrevStyle.CssClass = "dayTitle";
However when i render the control, my styles are not reflected.
When i check 'View Source' it applies my classes (italic) and ALSO applies in-line styles (underlined) along with it, which overwrites my styles. For example,
class="highlight" align="center" style="color:White;background-color:Silver;width:14%"
Can anyone help me out with this? To be very specific how to remove those in-line styles (by using which properties) from the HTML by settings properties of calendar control.
I have tried few, but that did not work.
e.Cell.Attributes.CssStyle.Clear();
e.Cell.Attributes.Add("Style", string.Empty);
clndrEvt.Style.Clear(); // clndrEvt is my calendar control
I had a similar issue recently with a project I had inherited. I worked out that the styling was being added via the Master.skin in app_themes. Might be worth a check there.
OK, I have a ton of controls on my page that I need to individually place. I need to set a margin here, a padding there, etc. None of these particular styles that I want to apply will be applied to more than control. What is the bets practice for determining at which level the style is placed, etc?
OK, my choices are
1) External CSS file
1A) Using ClientIdMode = Auto (the default)
I could assign a unique CssClass value to the ASP.NET control and, in the external CSS file, create a class selector that would only be applied to that one control.
1B) User Client ID = Predicatable
In the external CSS file, I could determine what the ID will be for the controls of interest and create an ID selector (#ControlID{Style} ). However, I fear maintenance issues due to including/removing parent containers that would cause the ID to change.
1C) User Client ID = Static.
I could choose static IDs for the controls such that I minimize the likelihood of a clash with auto generated IDs (perhaps by prefixing the ID with "StaticID_" and use an external stylesheet with ID selectors.
2) I could place the style right on the control. The only disadvantage here, as I see it, is that style info is brought down each time instead of being cached , which is what I'd get using an external CSS. If a style isn't resused, I personally don't see much benefit to placing it in an external file, though please explain why if you disagree. Is there moire of a reason that "It's nice to have all the CSS in one place?"
Definitely use an external CSS file.
Options 1 A-C are really a personal preference. I would go with ClientIDMode="Static" as it gives you the most control over the Ids and it will simplify accessing the elements with Javascript (if needed). I've always hated the ugly generated Ids in the earlier versions of ASP.NET. Using a unique CSS class for each element kinda defeats the purpose of a class, which is intended for use on multiple elements.
Just to confirm your thoughts of option 2, this is not the best approach. Putting your styles in an external CSS file will result in the file being downloaded once and cached, rather than having inline styles bloat your HTML that is sent to the client each time.