Hi,
I'm using the menu component to provide good looking headers for a custom treeview. Because it is a header with no interactivity I have disabled the menu items. The problem is that the text is now grey and I want it to be white.
What is the CSS that I need to alter to override the defaults?
Regards,
Jon
PS. If anyone has any suggestions for better ways to have a decent styled header on the treeview rather than using the menu I'd appreciate them. I've already tried a grid but didn't like the results in this case.
I'm using the menu component to provide good looking headers for a custom treeview. Because it is a header with no interactivity I have disabled the menu items. The problem is that the text is now grey and I want it to be white.
What is the CSS that I need to alter to override the defaults?
Regards,
Jon
PS. If anyone has any suggestions for better ways to have a decent styled header on the treeview rather than using the menu I'd appreciate them. I've already tried a grid but didn't like the results in this case.
7 Answers, 1 is accepted
0
Hi Jon,
Please mind that IE and Firefox treat differently a disabled item. IE automatically grays the text of the disabled item, but FF does not.
Best wishes,
Paul
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Please mind that IE and Firefox treat differently a disabled item. IE automatically grays the text of the disabled item, but FF does not.
Best wishes,
Paul
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
Rank 1
answered on 10 Jul 2009, 10:05 AM
Hi Paul,
Ah. I hadn't realised that the control was using the browser disabled function - I'd been working on the basis that it was a css class.
I'll have a look at leaving the menu items live and disable any click activity. Could I override the styles on the control for hover? Then I could change the hover style to the same as the normal state...This would need to be control specific as I have a proper functional menu on the same page.
Regards,
Jon
Ah. I hadn't realised that the control was using the browser disabled function - I'd been working on the basis that it was a css class.
I'll have a look at leaving the menu items live and disable any click activity. Could I override the styles on the control for hover? Then I could change the hover style to the same as the normal state...This would need to be control specific as I have a proper functional menu on the same page.
Regards,
Jon
0
Hi Jon,
Here's a sample code snippet that shows the needed approach.
Greetings,
Paul
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Here's a sample code snippet that shows the needed approach.
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| <style type="text/css"> |
| .alabala |
| { |
| color: Black !important; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <script type="text/javascript"> |
| function pageLoad() { |
| var menu = $find('<%= RadMenu1.ClientID %>'); |
| var item = menu.findItemByText("Root RadMenuItem2"); |
| if (item.get_enabled() == false) { |
| item.get_linkElement().className = "rmLink rmDisabled alabala"; |
| } |
| } |
| </script> |
| <telerik:RadMenu ID="RadMenu1" runat="server"> |
| <Items> |
| <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1"> |
| <Items> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3"> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2" Enabled="false"> |
| <Items> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenu> |
| </form> |
| </body> |
| </html> |
Greetings,
Paul
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
Rank 1
answered on 11 Jul 2009, 08:47 AM
Thanks Paul,
That did the trick.
On the first and last menu items I have images but when enabled I'd like them to NOT show the standard hover functionality. How would I go about doing that? I assume that it would be something similar?
Regards,
Jon
That did the trick.
On the first and last menu items I have images but when enabled I'd like them to NOT show the standard hover functionality. How would I go about doing that? I assume that it would be something similar?
Regards,
Jon
0
Jon
Top achievements
Rank 1
Rank 1
answered on 13 Jul 2009, 08:44 AM
Hi Paul,
I've just had more of a hunt for information on the current issue that I have where I want to disable the class for the click/hover on the menu item. I found some information about the CSS for the menus but nothing specific to my needs.
The previous code (I've included my version below) works for changing the text colour of the menu elements when they are disabled. The problem that I have is that I have a Add New image and a Refresh image both of which need to have a link on them but I don't want the hover highlight or the selected/clicked highlight to appear on them (owing to their width some of the selection style appears beneath the menu row!). What would I need to do to override the hover/selected classes?
Regards,
Jon
I've just had more of a hunt for information on the current issue that I have where I want to disable the class for the click/hover on the menu item. I found some information about the CSS for the menus but nothing specific to my needs.
The previous code (I've included my version below) works for changing the text colour of the menu elements when they are disabled. The problem that I have is that I have a Add New image and a Refresh image both of which need to have a link on them but I don't want the hover highlight or the selected/clicked highlight to appear on them (owing to their width some of the selection style appears beneath the menu row!). What would I need to do to override the hover/selected classes?
Regards,
Jon
| <script type="text/javascript"> |
| function pageLoad() { |
| var menu = $find('<%= uxRadMenu.ClientID %>'); |
| var items = menu.get_items(); |
| for (var i = 0; i < items.get_count(); i++) { |
| items.getItem(i).get_linkElement().className = "rmLink rmDisabled blackText"; |
| } |
| } |
| </script> |
0
Hi Jon,
Obviously, you have quite a few requirements keep coming. Therefore, I think it will be best if you open a formal support ticket and attach a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.
Thanks beforehand for your patience and cooperation,
Paul
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Obviously, you have quite a few requirements keep coming. Therefore, I think it will be best if you open a formal support ticket and attach a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.
Thanks beforehand for your patience and cooperation,
Paul
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
Rank 1
answered on 13 Jul 2009, 12:33 PM
Hi Paul,
I'm just simplifying the page to it's basic elements and will submit.
Regards,
Jon
I'm just simplifying the page to it's basic elements and will submit.
Regards,
Jon