I'm trying to alter the default styling for the numeric and currency editors. I would like to set the background color on focus and restore the background color after the focus is lost. I've tried setting CssClass and FocusCssClass in the markup with my class and they have no effect. I am able to use client events to set and restore the background color on client events but I would rather use the css that's "built-in". I'm using 2011.2
Please advise.
Thanks,
Steve
Hi Steve,
State css classes are merged. For example, appearance of focus state is defined by combination of normal-state with focus-state. Without merging, state appearances would be very hard to maintain.
Resulting appearance has nothing to do with editor or any other control. That is just one of the rule of a browser related to css. You may search/google documentation of DOM to learn more about those rules.If there is a conflicting attribute defined in different css classes with same resolution, then a class which is loaded by a browser last wins. Order of loading is defined not only order of classes within <style> object or within resourceFile.css, but also depends on timing. For example, if some resourceFile.css is loaded dynamically (like after replacing DIV which has that file), then classes defined in that file will have highest priority.
Thanks for the reply. That works for me too when I changed the ordering of the CSS in the stylesheet. I'm not sure why that is so. Definitely not documented anywhere that I saw.
I tried following and it worked.
<style type="text/css">.focusCss{background:red;}</style> <ig:WebNumericEditor ID="WebNumericEditor1" runat="server" FocusCssClass="focusCss"></ig:WebNumericEditor> <ig:WebNumericEditor ID="WebNumericEditor2" runat="server" FocusCssClass="focusCss"> <Buttons SpinButtonsDisplay="OnRight"></Buttons> </ig:WebNumericEditor>
If your application sets both CssClass and FocusCssClass, then in order for FocusCssClass to have effect, the definition(order) of FocusCssClass within style object should be located after definition of CssClass. Example:
<style type="text/css"> .noFocusCss{background:blue;} .focusCss{background:red;}</style><ig:WebNumericEditor ID="WebNumericEditor1" runat="server" CssClass="noFocusCss" FocusCssClass="focusCss"></ig:WebNumericEditor>