[Solved] Internet explorer redundant boxes

[Jozef]

Hi,

We have a problem with Editor control - when editing in Internet Explorer e.g. 9 (but also 8), there are not very nice boxes around every new line the user types. These boxes destroy design as they are changing width of whole control. These boxes are also resizable which is definetly unwanted. Please see attached screenshot. Everything looks OK in Firefox, Opera, Chrome... 

[Atanas Korchev]

Hi Jozef,

 I am afraid this is built-in Internet Explorer behavior and we cannot do much to prevent it. IE treats all block elements this way for some reason and this is beyond Telerik control.

Regards,
Atanas Korchev
the Telerik team

[Jozef]

Well... If I use for example TinyMCE editor, it doesn't have these problems in IE. So there must be a solution, but maybe not easy as this is hardcoded in current implementation :(.

[Atanas Korchev]

Hello Jozef,

 Can you send us the content which you are testing with as HTML? Perhaps we can find a solution.

Best wishes,
Atanas Korchev
the Telerik team

[Jozef]

This is the code, after I edited a content and clicked with mouse somewhere in editor - this action created that ugly box in IE.

<table style="height: 350px;" id="htmlWidget_editor" class="t-widget t-editor t-header"

    cellspacing="4" cellpadding="0">

    <tbody>

        <tr>

            <td class="t-editor-toolbar-wrap">

                <ul class="t-editor-toolbar">

                    <li class="t-editor-selectbox">

                        <div class="t-selectbox t-header t-formatBlock">

                            <div class="t-dropdown-wrap t-state-default" unselectable="on">

                                <span class="t-input" unselectable="on">Paragraph</span><span class="t-select" unselectable="on"><span

                                    class="t-icon t-arrow-down" unselectable="on">select</span></span></div>

                        </div>

                    </li>

                    <li class="t-editor-selectbox">

                        <div class="t-selectbox t-header t-fontName">

                            <div class="t-dropdown-wrap t-state-default" unselectable="on">

                                <span class="t-input" unselectable="on">(inherited font)</span><span class="t-select"

                                    unselectable="on"><span class="t-icon t-arrow-down" unselectable="on">select</span></span></div>

                        </div>

                    </li>

                    <li class="t-editor-selectbox">

                        <div class="t-selectbox t-header t-fontSize">

                            <div class="t-dropdown-wrap t-state-default" unselectable="on">

                                <span class="t-input" unselectable="on">(inherited size)</span><span class="t-select"

                                    unselectable="on"><span class="t-icon t-arrow-down" unselectable="on">select</span></span></div>

                        </div>

                    </li>

                    <li class="t-separator"></li>

                    <li class="t-editor-button"><a class="t-tool-icon t-bold" title="Bold (Ctrl + B)"

                        href="#" unselectable="on">bold</a></li><li class="t-editor-button"><a class="t-tool-icon t-italic"

                            title="Italic (Ctrl + I)" href="#" unselectable="on">italic</a></li><li class="t-editor-button">

                                <a class="t-tool-icon t-underline" title="Underline (Ctrl + U)" href="#" unselectable="on">

                                    underline</a></li><li class="t-separator"></li>

                    <li class="t-editor-button"><a class="t-tool-icon t-indent" title="Indent" href="#"

                        unselectable="on">indent</a></li><li class="t-editor-button"><a class="t-tool-icon t-outdent t-state-disabled"

                            href="#" unselectable="on">outdent</a></li><li class="t-separator"></li>

                    <li class="t-editor-button"><a class="t-tool-icon t-justifyLeft" title="Align text left"

                        href="#" unselectable="on">justifyLeft</a></li><li class="t-editor-button"><a class="t-tool-icon t-justifyCenter"

                            title="Center text" href="#" unselectable="on">justifyCenter</a></li><li class="t-editor-button">

                                <a class="t-tool-icon t-justifyRight" title="Align text right" href="#" unselectable="on">

                                    justifyRight</a></li><li class="t-separator"></li>

                    <li class="t-editor-button"><a class="t-tool-icon t-insertUnorderedList" title="Insert unordered list"

                        href="#" unselectable="on">insertUnorderedList</a></li><li class="t-editor-button"><a

                            class="t-tool-icon t-insertOrderedList" title="Insert ordered list" href="#"

                            unselectable="on">insertOrderedList</a></li><li class="t-separator"></li>

                    <li class="t-editor-button"><a class="t-tool-icon t-createLink" title="Insert hyperlink (Ctrl + K)"

                        href="#" unselectable="on">createLink</a></li><li class="t-editor-button"><a class="t-tool-icon t-unlink t-state-disabled"

                            href="#" unselectable="on">unlink</a></li><li class="t-editor-button"><a class="t-tool-icon t-insertImage"

                                title="Insert image" href="#" unselectable="on">insertImage</a></li></ul>

            </td>

        </tr>

        <tr>

            <td class="t-editable-area">

                <iframe class="t-content" src='javascript:"<html></html>"' frameborder="0"></iframe>

                <textarea style="display: none;" id="htmlWidget_editor-value" class="t-content t-raw-content"

                    cols="20" rows="5" name="htmlWidget_editor" autocomplete="off">&lt;p&gt;lkjlk\\julkj&lt;/p&gt;&lt;p&gt;kjh&lt;/p&gt;</textarea>

            </td>

        </tr>

    </tbody>

</table>

[Atanas Korchev]

Hi Jozef,

 We did further investigation on that matter. Here is what we found:

1) Internet Explorer renders this box when there is a block element and its width CSS attribute is set. When the user clicks that element the border is displayed.
 2) We couldn't find any solution for disabling this built-in browser behavior.
 3) We tried with other HTML editors and they all behaved the same way - displaying the box for block elements with width set.

I am attaching two screenshots showing Telerik Editor for ASP.NET MVC and TinyMCE behaving in the exact same way. The test markup was the same: "<div style='width:100px'>DIV</div>"


Regards,

Atanas Korchev
the Telerik team

[Jozef]

Hi Atanas,
Great progress. Although I can still see the difference between TinyMCE and Telerik... If I use example on TinyMCE website, I'm not able to make that box appear as user - by typing text and clicking around the content. As opposite to Telerik editor - simply by typing and clicking I make those boxes appear. How exactly did you insert DIV with set width? Is it possible to disable setting width of blocks to prevent showing these boxes in Telerik. Thank you for quick responses.

Best regards,
Jozef

[Atanas Korchev]

Hello Jozef,

 Can you reproduce this in our online demos? We don't have markup which contains block elements with width or height set. If your markup doesn't too then the blocks won't appear. It all depends on the HTML you are giving the editor.

You cannot reproduce this with TinyMCE because their sample markup does not have such elements.

All the best,
Atanas Korchev
the Telerik team

[Jozef]

Hi Atanas,

I was not able to reproduce it in your online demos. So there must be something wrong with my code. I'm attaching code for creating telerik editor we use:

@(Html.Telerik().Window()
    .Name("htmlWidget_window")
    .Title(Resources.WidgetHtmlHeader)
    .Content(
    @<text>
        @(Html.Telerik().Editor()
            .Name("htmlWidget_editor")
            .Tools(tools => tools.Clear()
                .FormatBlock()
                .FontName()
                .FontSize()
                .Separator()
                .Bold()
                .Italic()
                .Underline()
                .Separator()
                .Indent()
                .Outdent()
                .Separator()
                .JustifyLeft()
                .JustifyCenter()
                .JustifyRight()
                .Separator()
                .InsertUnorderedList()
                .InsertOrderedList()
                .Separator()
                .CreateLink()
                .Unlink()
                .InsertImage()
            )
            .HtmlAttributes(new { style = "height:350px;" })
            .StyleSheets(x => x.Add("~/Content/telerikEditor.css"))
            .ClientEvents(events => events.OnExecute("htmlWidget_editor_execute"))
        )
        <input id="htmlWidget_cancel" class="fltRight htmlButton" type="button" value="@Resources.WidgetCancel" />
        <input id="htmlWidget_save" class="fltRight htmlButton" type="button" value="@Resources.WidgetOk" />
    </text>
    )
    .Draggable(true)
    .Visible(false)
    .Modal(true)
    .Width(460)
    .Height(440)
    .Resizable(x => x.Enabled(false))
    .Buttons(x => x.ToString())
)

It also uses custom .css file to force "enter" to be new line instead of "shift+enter". This custom .css follows:

p
{
    min-height:12px;
    line-height:1;
    margin:0;
}

blockquote
{
    margin:0 0;
}

There is also no width. But just to be sure, I disabled this custom css and also disabled width of Telerik editor, but still there were boxes in IE. 

If I open editor in FF, using firebug I cannot find any element with set width within the content of editor. But when I inspect contnet using IE9, I cannot see content's markup - it is not possible to "click" on box created, as cursor changes to MOVE cursor instead of select. 

Thank you,

Jozef

[Dimo]

Hi Jozef,

The problem is caused by the min-height style for <p> elements that is used. If you don't see a change when removing the style, it is probably due to caching. I really don't think that you require such a style - you can adjust the paddings or line-height instead.

Kind regards,
Dimo
the Telerik team

[Jozef]

Thank you! It was really cached. 

Best regards,

Jozef