This is a migrated thread and some comments may be shown as answers.

editor tool bar renders button / icons incorrectly

1 Answer 163 Views
Editor
This is a migrated thread and some comments may be shown as answers.
tony
Top achievements
Rank 1
tony asked on 30 Nov 2012, 08:31 PM
The kendoEditor does not display its toolbar correctly. Code is as follows in an asp.net mvc context. The editor is displayed in a popup generated by kendoui.

html followed by javascript
<div  class="popupContent" >
  <div class="k-content" style="margin-left:25px; margin-top:25px">
      <textarea id="Editor" rows="10" cols="30" ></textarea>
  </div>
</div>

<
script type="text/javascript">
    var Editor = $("#Editor").kendoEditor({
       tools: [
         "bold",
          "italic",
          "underline",
          "strikethrough"
         ]
 
    }).data("kendoEditor");
    $(".k-editor").height("350px");
    $(".k-editor").width("900px");
</script>

The visual display is found in the image attachment. the buttons and icons are bunched and overlapping.
Kendo UI Web v2012.2.1029 
jQuery v1.7.1
jQuery UI 1.8.11i
ie9
visual studio 2010

using newer jquery did not help.

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 03 Dec 2012, 03:21 PM
Hello Tony,

It seems that the Editor is using a custom theme and the background position styles of the icons are not correct. Alternatively, the CSS code and the sprite image are from different versions, so the background position styles do not correspond to the actual icon positions in the sprite image. Please compare the theme that you are using with a one that works correctly.

If you need further assistance, please provide your theme and background images.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Editor
Asked by
tony
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or