I have an ASP.NET control, for example a DropDownList. I want to set the width of the control to auto. How do I achieve this? The Width property in ASP.NET control does not seem to accept auto, but it can only accept like percentage, pixels, and points.
I know I can make some workaround by specifying style="width:auto" as the control's attribute, and as this attribute is not a valid attribute for the control, it will not be parsed by asp.net and hence passed directly to browser. Is there a more proper way to do this?
A few alternatives:
Adding the style=width:auto; into the ASP.NET webcontrol, as mentioned in the question
Adding element.Attributes.Add('style', 'width:auto'); in the code behind. Generally it is the same as option number 1, just that it's added from code behind. But option 1 seems to be better because it does not mix presentation with code behind, and changing the presentation does not require recompiling of the program.
Remove the Width property for the ASP.NET control. If the Width property is not specified, it will be set as auto. But here we need to be careful if there is any CSS rule that may affect the behavior, for example we specify input in the CSS file.
These links might help you:
http://www.telerik.com/help/aspnet-ajax/combobox-auto-width.html
http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/dropdownautowidth/defaultcs.aspx
http://www.codeproject.com/Articles/5801/Adjust-combo-box-drop-down-list-width-to-longest-s
UPDATE
http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/dropdownlist/how-to-make-the-dropdownlist-width-auto-resize.aspx
http://www.webdeveloper.com/forum/showthread.php?48901-Setting-Drop-Down-List-Width-To-Auto
Please do not forget to comment that which of these links helped you. This will be beneficial for others.
Related
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.
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.
The demo web project that ships with the VS2010 contains a system.web.ui.webcontrols.menu control.
That particular menu includes the IncludeStyleBlock property.
When the IncludeStyleBlock property is set to False the menu is displayed as it supposed to. The menu gets destroyed if i set that property to True. So here is my main question...
Is there any way of preserving the appearence of the menu, with the IncludeStyleBlock property set to false?
P.S. I have to set it to False... since my provider does not support the forth generation of the .NET framework.
If the generate elements got id's and classes, you can style them with a normal CSS file. Does it generated inline CSS with the option turned on? If so you can copy that to an external file to start with
Does this page give you some clue, specifically in the Remarks section?
In short, if you set the property to false, you must provide "your own block of CSS definitions in the page, or include a link to an external CSS file that contains the definitions." In addition, you won't be able to set style properties.
So, conversely, if you set the property to true, it would ignore the style properties you provide.
You misspoke in your question. You begin by saying the menu is perfect when IncludeStyleBlock property is set to False and breaks when True. Then you say it is broken when False and you want a workaround for making in work under False.
Because of this confusion I am basing this answer off the assumption that you want to mimic the default style set by ASP.NET when IncludeStyleBlock is set to true but while keeping IncludeStyleBlock="False"
First: Since the menu displays perfectly when IncludeStyleBlock="True" , what you need to do is set it to true and preview the rendered source code. From the source code you can find the copy of the default CSS block that the Menu control generates by default. This is what you need.
Second: Once you have the CSS block, simply copy and paste it into your markup (inline or externally). Once you do that, you can make IncludeStyleBlock="False" and the now inline/external CSS block will preserve the appearance of the menu. (As a bonus, this is a small performance boost from caching CSS)
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.
In WPF it's possible to set a property of a custom control by either an attribute or by an inner property. Like this:
<custom:UserControl1 Text="My text here..."></custom:UserControl1>
Equals:
<custom:UserControl1>
<custom:UserControl1.Text>
My text here...
</custom:UserControl1.Text>
</custom:UserControl1>
In ASP.net the type of custom control property can be defined by the PersistenceMode attribute. At the moment I can only find a way to define a property either as an attribute or as an inner property.
Is there a possible way to set the custom control property like WPF on either way?
Thanks!
For Text, setting:
[
PersistenceMode(PersistenceMode.InnerProperty),
DesignerSerializationVisibility(DesignerSerializationVisibility.Content)
]
public string Text
For the property you want to appear that way will allow you do to the second option; however, alternatively, you probably also could specify it inline. If that's the only property that you use as a child element, you can also specify PersistenceMode.InnerDefaultProperty or EncodedInnerDefaultProperty (as it would be the default), that latter of which would encode it.
Realistically, you can't do everything like you can in WPF in ASP.NET; it's just not that fully supported in the designer as that wasn't it's intent. But primitive types you can define as an inner property with a content design serialization, and it should allow you to do both options.
HTH.