Hello there,
I have just upgraded to Q1 2014 from Q3 2013 SP2. I have noticed the following behaviour in the toolbars in IE11:
- The images with the Question tab activated (740px width) - there is a large difference in the way in which the bottom tools are rendered
- The images with the Instructions tab activated (99% width) - the top toolbar behaves so differently to the other.
Before the upgrade, these editors looked like the compatibility mode off images, but the compatibility mode was on.
Now, after the upgrade and with compatibility mode on, they look terrible. Turning off compatibility mode ruins the layout of the rest of my application, so the requirement is to have compatibility mode settings to on.
I have also included a screen capture of my aspx code - I collapsed some areas to fit on to one screen.
Do you have any thoughts / suggestions?
I have just upgraded to Q1 2014 from Q3 2013 SP2. I have noticed the following behaviour in the toolbars in IE11:
- The images with the Question tab activated (740px width) - there is a large difference in the way in which the bottom tools are rendered
- The images with the Instructions tab activated (99% width) - the top toolbar behaves so differently to the other.
Before the upgrade, these editors looked like the compatibility mode off images, but the compatibility mode was on.
Now, after the upgrade and with compatibility mode on, they look terrible. Turning off compatibility mode ruins the layout of the rest of my application, so the requirement is to have compatibility mode settings to on.
I have also included a screen capture of my aspx code - I collapsed some areas to fit on to one screen.
Do you have any thoughts / suggestions?
4 Answers, 1 is accepted
0
Hi Bryan,
I tried to reproduce the problem with the following markup, but to no avail.
Please examine it and let me know if I am missing something. It would be helpful if you could provide a simple, runnable project, that demonstrates the problem, so that I could investigate it on my end.
Note that the shown collapse issue in toolbar-width-99percent---compatibility-mode-on.png is an expected behavior because the compatibility mode does not support such collapse functionality of the HTML elements. I recommend using multiple Toolgroups for the tools, so that they could collapse as expected in earlier.
Regards,
Ianko
Telerik
I tried to reproduce the problem with the following markup, but to no avail.
<
telerik:RadTabStrip
runat
=
"server"
ID
=
"RadTabStrip1"
MultiPageID
=
"RadMultiPage1"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Tab1"
runat
=
"server"
Selected
=
"true"
></
telerik:RadTab
>
<
telerik:RadTab
Text
=
"Editor1"
runat
=
"server"
></
telerik:RadTab
>
<
telerik:RadTab
Text
=
"Editor2"
runat
=
"server"
></
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
runat
=
"server"
ID
=
"RadMultiPage1"
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"RadPageView1"
Selected
=
"true"
>
<
h2
>text</
h2
>
</
telerik:RadPageView
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"RadPageView2"
>
<
telerik:RadEditor
runat
=
"server"
ID
=
"RadEditor1"
Width
=
"760"
></
telerik:RadEditor
>
</
telerik:RadPageView
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"RadPageView3"
>
<
telerik:RadEditor
runat
=
"server"
ID
=
"RadEditor2"
Width
=
"99%"
></
telerik:RadEditor
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
Please examine it and let me know if I am missing something. It would be helpful if you could provide a simple, runnable project, that demonstrates the problem, so that I could investigate it on my end.
Note that the shown collapse issue in toolbar-width-99percent---compatibility-mode-on.png is an expected behavior because the compatibility mode does not support such collapse functionality of the HTML elements. I recommend using multiple Toolgroups for the tools, so that they could collapse as expected in earlier.
Regards,
Ianko
Telerik
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0

Bryan
Top achievements
Rank 1
answered on 28 Feb 2014, 01:07 AM
Hi Ianko,
Here is a link to a zip file that will replicate the issue (https://dl.dropboxusercontent.com/u/63298198/EditorIssue.zip)
Please note:
VS2012
UI for ASP.NET AJAX version Q1 2014 (updated 27Feb2014)
.Net Framework 4.0 (not 4.5)
IE 11 with compatibility mode on
​[quote]Ianko said:
Note that the shown collapse issue in toolbar-width-99percent---compatibility-mode-on.png is an expected behavior because the compatibility mode does not support such collapse functionality of the HTML elements. I recommend using multiple Toolgroups for the tools, so that they could collapse as expected in earlier[/quote]
With regards to this, prior to yesterday's controls upgrade, I was not getting this formatting issue using UI for ASP.NET AJAX version Q3 2013 SP1.
Hope this helps...
Here is a link to a zip file that will replicate the issue (https://dl.dropboxusercontent.com/u/63298198/EditorIssue.zip)
Please note:
VS2012
UI for ASP.NET AJAX version Q1 2014 (updated 27Feb2014)
.Net Framework 4.0 (not 4.5)
IE 11 with compatibility mode on
​[quote]Ianko said:
Note that the shown collapse issue in toolbar-width-99percent---compatibility-mode-on.png is an expected behavior because the compatibility mode does not support such collapse functionality of the HTML elements. I recommend using multiple Toolgroups for the tools, so that they could collapse as expected in earlier[/quote]
With regards to this, prior to yesterday's controls upgrade, I was not getting this formatting issue using UI for ASP.NET AJAX version Q3 2013 SP1.
Hope this helps...
0
Accepted
Hello Bryan,
You are correct this issues are confirmed as bugs and I will log them into our feedback portal.
As a token of gratitude I am updating your Telerik points.
For the time being I succeeded to workaround the issues with the following markup:
The problem with the toolgroups is that under IE7 (compatibility mode) there is a logic that modifies the width of the HTML elements and restricts the inner tools to stay fixed.
The problem with the height of the editor stems from an improvement made on the resize calculation. It appears that when a dockingzone="bottom" is used the height is not calculated correctly. A better solution from the one suggested in the example markup is not using this attribute for the time being, although I hope the above fix should be working properly.
Let me know if you have further concerns.
Regards,
Ianko
Telerik
You are correct this issues are confirmed as bugs and I will log them into our feedback portal.
As a token of gratitude I am updating your Telerik points.
For the time being I succeeded to workaround the issues with the following markup:
<
table
cellpadding
=
"3"
width
=
"1000px"
border
=
"0"
>
<
tr
align
=
"left"
>
<
td
>
<
asp:Label
runat
=
"server"
ID
=
"lblName"
Text
=
"Name"
/></
td
>
</
tr
>
<
tr
align
=
"left"
>
<
td
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtName"
MaxLength
=
"100"
Width
=
"450px"
/></
td
>
</
tr
>
<
tr
align
=
"left"
valign
=
"top"
>
<
td
>
<
telerik:RadTabStrip
runat
=
"server"
ID
=
"ts1"
SelectedIndex
=
"0"
MultiPageID
=
"mp1"
Skin
=
"Default"
Align
=
"Justify"
<Tabs>
<
telerik:RadTab
Text
=
"Details"
Value
=
"detail"
PageViewID
=
"pvDetails"
/>
<
telerik:RadTab
Text
=
"Question"
Value
=
"qn"
PageViewID
=
"pvQn"
/>
<
telerik:RadTab
Text
=
"Guidance"
Value
=
"guidance"
PageViewID
=
"pvGuid"
/>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
runat
=
"server"
ID
=
"mp1"
SelectedIndex
=
"0"
CssClass
=
"multiPage"
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"pvDetails"
>
<
center
>
<
h2
>Not editor</
h2
>
</
center
>
</
telerik:RadPageView
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"pvQn"
>
<
center
>
<
br
/>
<
table
width
=
"95%"
>
<
tr
align
=
"left"
>
<
td
>
<
telerik:RadEditor
ID
=
"txtQuestion"
runat
=
"server"
Height
=
"350px"
Width
=
"740px"
ToolsFile
=
"CustomToolsImagesFile.xml"
ConvertTagsToLower
=
"True"
SpellEditDistan
ToolbarMode
=
"Default"
OnClientLoad
=
"OnClientLoad"
>
</
telerik:RadEditor
>
<
br
/>
</
td
>
</
tr
>
</
table
>
</
center
>
<
br
/>
</
telerik:RadPageView
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"pvGuid"
>
<
center
>
<
br
/>
<
table
width
=
"95%"
>
<
tr
align
=
"left"
>
<
td
>
<
telerik:RadEditor
ID
=
"txtGuidance"
runat
=
"server"
Height
=
"400px"
Width
=
"99%"
ToolsFile
=
"CustomToolsImagesFile.xml"
ConvertTagsToLower
=
"True"
SpellEditDistan
ToolbarMode
=
"Default"
OnClientLoad
=
"OnClientLoad"
>
</
telerik:RadEditor
>
</
td
>
</
tr
>
</
table
>
</
center
>
<
br
/>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
</
td
>
</
tr
>
</
table
>
<%-- The following script fixes the problem with the editor set with toolgroups having dockingzone=bottom attribute --%>
<
script
type
=
"text/javascript"
>
Sys.Application.add_load(function () {
var txtQuestion = $find("<%= txtQuestion.ClientID %>");
var txtGuidance = $find("<%= txtGuidance.ClientID %>");
txtQuestion.get_element().style.height = "99%"
txtGuidance.get_element().style.height = "99%"
txtQuestion.repaint();
txtGuidance.repaint();
});
var oldOnresizeEnd = Telerik.Web.UI.RadEditor.prototype.onResizeEnd;
Telerik.Web.UI.RadEditor.prototype.onResizeEnd = function () {
oldOnresizeEnd.call(this);
this.get_element().style.height = "";
}
</
script
>
<%-- The following fixes the problem with the wrong toolgroup collapsing in IE7 (compatibility mode) --%>
<
script
type
=
"text/javascript"
>
function OnClientLoad(editor, args) {
if (editor.isVisible()) {
fixToolbarsInIE(editor);
} else {
editor.add_firstShow(function () {
setTimeout(function () {
fixToolbarsInIE(editor);
}, 0);
})
}
}
function fixToolbarsInIE(editor) {
if ($telerik.isIE) {
var $ = $telerik.$;
var editorID = editor.get_id();
var topTD = document.getElementById(editorID + "Top");
var toolGroupElements = $(topTD).find(".reToolbar");
for (var i = 0, l = toolGroupElements.length; i <
l
; i++) {
calculateTools(toolGroupElements[i]);
}
}
}
function calculateTools(toolGroup) {
var
tools
=
toolGroup
.children;
var
size
=
0
;
for (var
i
=
0
,
l
=
tools
.length; i < l; i++) {
var
tool
=
tools
[i];
size += tool.offsetWidth;
}
toolGroup.style.width
=
size
+ "px";
}
</script>
The problem with the toolgroups is that under IE7 (compatibility mode) there is a logic that modifies the width of the HTML elements and restricts the inner tools to stay fixed.
The problem with the height of the editor stems from an improvement made on the resize calculation. It appears that when a dockingzone="bottom" is used the height is not calculated correctly. A better solution from the one suggested in the example markup is not using this attribute for the time being, although I hope the above fix should be working properly.
Let me know if you have further concerns.
Regards,
Ianko
Telerik
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0

Bryan
Top achievements
Rank 1
answered on 04 Mar 2014, 04:40 AM
Hi Ianko,
Thanks, this fix resolved the above issue
Thanks, this fix resolved the above issue