I am attempting to use the RadDock with a responsive layout. In general, the Dock is working extremely well and solving some issues in a responsive design, however I am having one problem with the display of the control.
I have attached two different screen captures that show the issue. When you look at them you will see a line of inadvertent corners (or something) that are displayed. It does not matter if I use one dock control or two. The selection of the skin does not matter.
The RadDock does not do this when it is used outside of the responsive layout, however that really is one of the major directions today and I would think the results shown in the screen captures would be undesirable.
Does anyone know of any way to eliminate these visual problems?
Thanks in advance!
Lynn
I have attached two different screen captures that show the issue. When you look at them you will see a line of inadvertent corners (or something) that are displayed. It does not matter if I use one dock control or two. The selection of the skin does not matter.
The RadDock does not do this when it is used outside of the responsive layout, however that really is one of the major directions today and I would think the results shown in the screen captures would be undesirable.
Does anyone know of any way to eliminate these visual problems?
Thanks in advance!
Lynn
5 Answers, 1 is accepted
0
Hello Lynn,
The encountered problem appears to be similar to the one, described in this Knowledge Base article. This issue has been fixed and should not occur with the latest version of RadControls for ASP.NET AJAX. Please verify if you are using the latest release and if not check whether the problem persists after upgrading.
You can also verify if there are custom styles that are modifying the skins of the RadDock. For this purpose, please remove your custom styles from the page and check if the visual glitch can still be examined.
In case the problem persists after trying the suggestions above, please provide a fully working project and step by step instructions for replicating it so that I can inspect it locally and provide an according solution.
All the best,
Slav
the Telerik team
The encountered problem appears to be similar to the one, described in this Knowledge Base article. This issue has been fixed and should not occur with the latest version of RadControls for ASP.NET AJAX. Please verify if you are using the latest release and if not check whether the problem persists after upgrading.
You can also verify if there are custom styles that are modifying the skins of the RadDock. For this purpose, please remove your custom styles from the page and check if the visual glitch can still be examined.
In case the problem persists after trying the suggestions above, please provide a fully working project and step by step instructions for replicating it so that I can inspect it locally and provide an according solution.
All the best,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Lynn
Top achievements
Rank 2
Rank 2
answered on 19 Dec 2012, 04:24 PM
Slav,
Thanks for the advice. I cannot try until late afternoon but will do so as soon as possible and return feedback.
The 3rd party responsive templates may contain special classes that are causing a problem but I doubt it due to the class names Telerik uses.
I thought I was on the latest release but will check that first when I can this afternoon.
Thanks and feedback will be forthcoming.
Lynn
0
Lynn
Top achievements
Rank 2
Rank 2
answered on 20 Dec 2012, 04:31 AM
Slav,
I tried the use of the FixDockTitleBar.zip supplied code (the repainting javascript). However, this had no effect whatsoever on the problem. I did use debug breakpoints to ensure that I had inserted the code correctly and that it was truly executing.
I am currently running RadControls for ASP.NET AJAX Q3 2012. The Bin45 version of Telerik.Web.UI.dll is 2012.3.1205.45. Is this the latest version available? Since you have implemented your "total products downloader" it isn't quite as easy to verify this.
Following these efforts, I started trying to isolate the problem.
As you saw in a previous screen capture, I am using the JumpEye (www.Jumpeye.com) responsive framework in this project and have not encountered any other issues. I first isolated this problem down to the JFGrid.css file.
After quite a large number of "commenting out" attempts, I finally isolated the problem down to a single line of code in this file (JFGrid.css). The line of code in question is line number 317 (their current version), and the actual code line is "li { margin-bottom: 10px; }".
If I comment only this line of code out, your Dock control works perfectly. If I allow this line of css code through, the visual problem occurs. This is a "hard failure" in that it is repeatable with no additional effort.
Please let me know if you require any additional information. Because of the licensed nature of the JumpEye product, I would be more comfortable if you folks worked with them to acquire a copy of the framework for further testing.
If you should have any other thoughts or things that you would like me to try, I would be more than happy to do so and provide what you need. If you cannot recreate the problem from this information, let me know and I will work to package something up that you can use.
Thanks again for your support! I am going to try to figure out a way of resolving this from what I now know. Thanks for putting me on the path to identifying this one.
Lynn
I tried the use of the FixDockTitleBar.zip supplied code (the repainting javascript). However, this had no effect whatsoever on the problem. I did use debug breakpoints to ensure that I had inserted the code correctly and that it was truly executing.
I am currently running RadControls for ASP.NET AJAX Q3 2012. The Bin45 version of Telerik.Web.UI.dll is 2012.3.1205.45. Is this the latest version available? Since you have implemented your "total products downloader" it isn't quite as easy to verify this.
Following these efforts, I started trying to isolate the problem.
As you saw in a previous screen capture, I am using the JumpEye (www.Jumpeye.com) responsive framework in this project and have not encountered any other issues. I first isolated this problem down to the JFGrid.css file.
After quite a large number of "commenting out" attempts, I finally isolated the problem down to a single line of code in this file (JFGrid.css). The line of code in question is line number 317 (their current version), and the actual code line is "li { margin-bottom: 10px; }".
If I comment only this line of code out, your Dock control works perfectly. If I allow this line of css code through, the visual problem occurs. This is a "hard failure" in that it is repeatable with no additional effort.
Please let me know if you require any additional information. Because of the licensed nature of the JumpEye product, I would be more comfortable if you folks worked with them to acquire a copy of the framework for further testing.
If you should have any other thoughts or things that you would like me to try, I would be more than happy to do so and provide what you need. If you cannot recreate the problem from this information, let me know and I will work to package something up that you can use.
Thanks again for your support! I am going to try to figure out a way of resolving this from what I now know. Thanks for putting me on the path to identifying this one.
Lynn
0
Accepted
Hi Lynn,
Thank you for the additional information. Indeed, the style you mentioned is causing the visual glitch. It modifies the HTML elements of the RadDock's command buttons thus stretching the title bar.
Note that it is not a recommended practice to use global styles when creating the visualization of your website. For example, a similar problem can occur if you implement a menu that uses li elements to render the menu items. In this case you do not have control over the additional styles, nevertheless I am mentioning this as it will be useful when you add custom CSS styles to a website.
You can use the following style to ensure that the correct margin is applied to the command buttons of RadDock:
Feel free to contact us again if you encounter more difficulties.
Kind regards,
Slav
the Telerik team
Thank you for the additional information. Indeed, the style you mentioned is causing the visual glitch. It modifies the HTML elements of the RadDock's command buttons thus stretching the title bar.
Note that it is not a recommended practice to use global styles when creating the visualization of your website. For example, a similar problem can occur if you implement a menu that uses li elements to render the menu items. In this case you do not have control over the additional styles, nevertheless I am mentioning this as it will be useful when you add custom CSS styles to a website.
You can use the following style to ensure that the correct margin is applied to the command buttons of RadDock:
.RadDock .rdCenter .rdCommands li{ margin-bottom: 0 !important;}Feel free to contact us again if you encounter more difficulties.
Kind regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Lynn
Top achievements
Rank 2
Rank 2
answered on 22 Dec 2012, 12:40 PM
Slav,
Thank you for the response back and I will try the style information that you supplied. Even without trying that code, I have marked this item as answered because I agree with you...it was a poor practice on the part of the responsive framework supplier to use such a "global" style setting. Your Dock is not the only product that will be affected by this setting.
However, I would also ask that Telerik be very sensitive to the position on "ul" and "li" items because they are an integral part of the responsive layout architecture that has become so incredibly popular in 2012. The responsive layout is particularly great in the area of menus because you can control so much of the presentation on various screen layouts -- but this is all done with "ul" and "li" elements.
Thanks again for the assistance!
Lynn
Thank you for the response back and I will try the style information that you supplied. Even without trying that code, I have marked this item as answered because I agree with you...it was a poor practice on the part of the responsive framework supplier to use such a "global" style setting. Your Dock is not the only product that will be affected by this setting.
However, I would also ask that Telerik be very sensitive to the position on "ul" and "li" items because they are an integral part of the responsive layout architecture that has become so incredibly popular in 2012. The responsive layout is particularly great in the area of menus because you can control so much of the presentation on various screen layouts -- but this is all done with "ul" and "li" elements.
Thanks again for the assistance!
Lynn