I have encountered three issues with RadToolBar, all demonstrated with the code below:
1. In IE7 the RadToolBarDropDown is displayed shifted to the right. In Firefox the menu displays directly underneath dropdown but in IE7 it is too far to the right.
2. RadToolBarButton does not self uncheck if specified as such (IE7 and Firefox). To uncheck you must click on it to check, then click again to "uncheck" and then click away from the toolbar (blur) to uncheck. Shouldn't it uncheck immediately after the second click on the checked button?
3. As noted in a previous post, the RadToolBarDropDown menu, in IE7 , displays in "halves", you can see the effect in the code below.
1. In IE7 the RadToolBarDropDown is displayed shifted to the right. In Firefox the menu displays directly underneath dropdown but in IE7 it is too far to the right.
2. RadToolBarButton does not self uncheck if specified as such (IE7 and Firefox). To uncheck you must click on it to check, then click again to "uncheck" and then click away from the toolbar (blur) to uncheck. Shouldn't it uncheck immediately after the second click on the checked button?
3. As noted in a previous post, the RadToolBarDropDown menu, in IE7 , displays in "halves", you can see the effect in the code below.
| <%@ Page |
| Language="C#" |
| AutoEventWireup="true" |
| CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <title>RadToolBar Issues</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| <asp:ScriptManager ID="scriptManager" runat="server"> |
| </asp:ScriptManager> |
| <div style="float:left;"> |
| <telerik:RadToolBar |
| ID="RadToolBar1" |
| Skin="Web20" |
| runat="server" |
| Width="965px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| <Items> |
| <telerik:RadToolBarButton runat="server"> |
| <ItemTemplate> |
| <asp:Label |
| ID="lblSearch" |
| runat="server" |
| Text="I am a label!" /> |
| </ItemTemplate> |
| </telerik:RadToolBarButton> |
| <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Text="Button 1" /> |
| <telerik:RadToolBarDropDown runat="server" Text="Group Menu"> |
| <Buttons> |
| <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Group="Group" Text="I like this menu" Checked="true" /> |
| <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Group="Group" Text="but in IE" Checked="false" /> |
| <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Group="Group" Text="it displays in halves" Checked="false" /> |
| <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Group="Group" Text="and too far to the right!" Checked="false" /> |
| </Buttons> |
| </telerik:RadToolBarDropDown> |
| </Items> |
| </telerik:RadToolBar> |
| </div> |
| </div> |
| </form> |
| </body> |
| </html> |
11 Answers, 1 is accepted
0
Hi Daniel,
I discussed point #2 in several forum posts (e.g. Disabled button / Inverted Hover Behavior post). It is fixed now and the bug will be removed in the first SP of the suite. In the meantime you can use the workaround I provided there:
Up to #1 and #3 - I'm afraid I am missing something, as I was not able to reproduce these with the page you sent us (please, find the attached screenshots). Do you include some stylesheets to the page, that might affect the RadToolBar look?
Kind regards,
Erjan Gavalji
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
I discussed point #2 in several forum posts (e.g. Disabled button / Inverted Hover Behavior post). It is fixed now and the bug will be removed in the first SP of the suite. In the meantime you can use the workaround I provided there:
function onClientButtonClicking(sender, args)
{
args.get_item().get_element().className = args.get_item().get_element().className.replace(/rtbItemHovered /ig, "");
args.get_item().blur();
args.get_item().disable();
}
{
args.get_item().get_element().className = args.get_item().get_element().className.replace(/rtbItemHovered /ig, "");
args.get_item().blur();
args.get_item().disable();
}
Up to #1 and #3 - I'm afraid I am missing something, as I was not able to reproduce these with the page you sent us (please, find the attached screenshots). Do you include some stylesheets to the page, that might affect the RadToolBar look?
Kind regards,
Erjan Gavalji
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Daniel
Top achievements
Rank 1
Rank 1
answered on 25 Apr 2008, 11:38 PM
Hi Erjan,
You're right, my apologies. It seems a lot of my issues are stemming from how my design's CSS interacts with the RadControls, obviously some elements cannot be nicely contained within a wrapper div to avoid the issues.
At any rate at this style to the head of the example below and it will reproduce the two issues, the "halves"-like effect when the menu is displayed and the incorrect placement of the menu.
I should be able to find a workaround in the design for this but it would be interesting to know why this tag effects the placement like it does.
You're right, my apologies. It seems a lot of my issues are stemming from how my design's CSS interacts with the RadControls, obviously some elements cannot be nicely contained within a wrapper div to avoid the issues.
At any rate at this style to the head of the example below and it will reproduce the two issues, the "halves"-like effect when the menu is displayed and the incorrect placement of the menu.
I should be able to find a workaround in the design for this but it would be interesting to know why this tag effects the placement like it does.
| <style type="text/css"> |
| body |
| { |
| text-align: center; |
| } |
| </style> |
0
Daniel
Top achievements
Rank 1
Rank 1
answered on 26 Apr 2008, 12:04 AM
Also, a quick note about the button fix, the code as is actually makes things worse, but removing the last line call to disable(); will fix the behavior as its described. The disable() method call was probably for the specific user's requirement in the post you referenced. This function just removes the stuck hover after you deselect a button.
| function onClientButtonClicking(sender, args) |
| { |
| args.get_item().get_element().className = args.get_item().get_element().className.replace(/rtbItemHovered /ig, ""); |
| args.get_item().blur(); |
| } |
0
Daniel
Top achievements
Rank 1
Rank 1
answered on 26 Apr 2008, 12:29 AM
Sorry to comment again but it appears your javascript workaround (minus the disable()) for the button issue is only working in Firefox, in IE the behavior is exactly the same. To be specific, this is the behavior:
(prior to javascript fix)
1. Click on button, it shows "Checked" state (in Web20 it's showing the box around the button plus the Checked image... I know that your fix wants to remove the box around the button (hover) but that's not necessary for me and it doesn't work well, so bare with me in this description)
2. Click on buton, it shows "Unchecked" state with box around the button
3. To remove the box around the button (hover) you have to move somewhere else (i.e., blur, like the javascript fix does)
(after javascript)
In Firefox, the expected behavior (or perhaps only my expected behavior) is shown, I see Checked when Checked, Unchecked when Unchecked, and hover disappears when I move the mouse away without having to manually click/blur in a new region.
In IE there is no change in behavior.
(prior to javascript fix)
1. Click on button, it shows "Checked" state (in Web20 it's showing the box around the button plus the Checked image... I know that your fix wants to remove the box around the button (hover) but that's not necessary for me and it doesn't work well, so bare with me in this description)
2. Click on buton, it shows "Unchecked" state with box around the button
3. To remove the box around the button (hover) you have to move somewhere else (i.e., blur, like the javascript fix does)
(after javascript)
In Firefox, the expected behavior (or perhaps only my expected behavior) is shown, I see Checked when Checked, Unchecked when Unchecked, and hover disappears when I move the mouse away without having to manually click/blur in a new region.
In IE there is no change in behavior.
0
Daniel
Top achievements
Rank 1
Rank 1
answered on 26 Apr 2008, 01:18 AM
Erjan,
I filed a separate support ticket for the Button issues I'm describing here (with the fix applied) as I don't think I've done a good job of describing. The ticket has a reproduction showing that with your fix, FF works but IE doesn't. Without the fix, they both behave the same.
Daniel
I filed a separate support ticket for the Button issues I'm describing here (with the fix applied) as I don't think I've done a good job of describing. The ticket has a reproduction showing that with your fix, FF works but IE doesn't. Without the fix, they both behave the same.
Daniel
0
Hello Daniel,
Thank you for sending a demo project. We examined it and suggested a solution in the support ticket you started. If everything works as expected on your side, you can share the know-how in this forum thread.
Thanks.
Erjan
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Thank you for sending a demo project. We examined it and suggested a solution in the support ticket you started. If everything works as expected on your side, you can share the know-how in this forum thread.
Thanks.
Erjan
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Patrick Stovall
Top achievements
Rank 1
Rank 1
answered on 02 May 2008, 02:41 PM
Daniel,
What was the resolution to this?
I to am having the same problem and removing the text-align: center; didn't fix the problem.
I'm hoping you came up with a solution.
Thanks!
pat.
What was the resolution to this?
I to am having the same problem and removing the text-align: center; didn't fix the problem.
I'm hoping you came up with a solution.
Thanks!
pat.
0
Daniel
Top achievements
Rank 1
Rank 1
answered on 02 May 2008, 02:48 PM
Hi Patrick,
For the issue related to text-align:center, I wasn't able to find a workaround other than removing that attribute and tweaking the design a little. Is your RadToolBar in a <div style="float:left;">? Likely there is a text-align:center or something similar higher up in your CSS selector hierarchy, possibly up in body{} or in one of your content divs?
I'll try to help you with it, the first thing to do is trace back through your styles to see if you can find this.
For the issue related to text-align:center, I wasn't able to find a workaround other than removing that attribute and tweaking the design a little. Is your RadToolBar in a <div style="float:left;">? Likely there is a text-align:center or something similar higher up in your CSS selector hierarchy, possibly up in body{} or in one of your content divs?
I'll try to help you with it, the first thing to do is trace back through your styles to see if you can find this.
0
Daniel
Top achievements
Rank 1
Rank 1
answered on 02 May 2008, 02:52 PM
Hello Erjan,
The support ticket suggestions solved the issues. The issue with the text-align:center I got around by removing it.
For others, here is the code that will result in a correct unfocus in IE7/FF:
The trick is to change the focused style, not the hovered style, when you blur on a click.
Also if you're trying to set the selected item in a toolbar drop down to bold (or any other style, you need to include additional selectors):
This will set the style on the correct area of the drop-down. Using simply a class like .bold for CheckedCssClass will not override the style.
Hope this helps!
The support ticket suggestions solved the issues. The issue with the text-align:center I got around by removing it.
For others, here is the code that will result in a correct unfocus in IE7/FF:
| function OnClientButtonClicking(sender, args) |
| { |
| args.get_item().get_element().className = args.get_item().get_element().className.replace(/rtbItemFocused /ig, ""); |
| args.get_item().blur(); |
| } |
The trick is to change the focused style, not the hovered style, when you blur on a click.
Also if you're trying to set the selected item in a toolbar drop down to bold (or any other style, you need to include additional selectors):
| .bold .rtbWrap .rtbText |
| { |
| font-weight:bold !important; |
| } |
This will set the style on the correct area of the drop-down. Using simply a class like .bold for CheckedCssClass will not override the style.
Hope this helps!
0
Remi
Top achievements
Rank 2
Rank 2
answered on 25 Aug 2008, 03:17 PM
Hello,
We're experiencing issues 2 and 3. Thanks for opening the post Daniel and for your comments.
The menu loads in halves under IE7.0 and to the right. We want it justified left under the Tab bar button that opens the drop down.
In firefox 2.0, the drop down only shows half the menu, while the other half is cut off and doesn't appear at all.
What was the work around to correct this functionality? We're using Q2 Ajax ASP.Net rad controls.
Any assistance or resolution is greatly appreciated. I've been working with the CSS and float:left but to no resolve.
Thanks.
We're experiencing issues 2 and 3. Thanks for opening the post Daniel and for your comments.
The menu loads in halves under IE7.0 and to the right. We want it justified left under the Tab bar button that opens the drop down.
In firefox 2.0, the drop down only shows half the menu, while the other half is cut off and doesn't appear at all.
What was the work around to correct this functionality? We're using Q2 Ajax ASP.Net rad controls.
Any assistance or resolution is greatly appreciated. I've been working with the CSS and float:left but to no resolve.
Thanks.
0
Hello Remi,
Issue #2 is already fixed. Are you using the latest official version of Telerik.Web.UI? As for the other issue, It might be caused by some external css styles you incorporate in your page. Can you open a support ticket and send us a working sample which we could test locally?
Kind regards,
Peter
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Issue #2 is already fixed. Are you using the latest official version of Telerik.Web.UI? As for the other issue, It might be caused by some external css styles you incorporate in your page. Can you open a support ticket and send us a working sample which we could test locally?
Kind regards,
Peter
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.