RadEditor Space Between Scrollbar and Border.

Thread is closed for posting
4 posts, 0 answers
  1. jawahar
    jawahar avatar
    10 posts
    Member since:
    Aug 2012

    Posted 28 Aug 2012 Link to this post

    Hi,

    In your website
    http://demos.telerik.com/aspnet-ajax/editor/examples/editorastextbox/defaultcs.aspx

    There is a RadEditor as a TextBox control available for Demo.

    My requirement is to remove the Bottom Space between Vertical Scroll Bar and Bottom Border(Refer the attachedimage).

    Please guide me to fix this.

    WIth Advanced Thanks,
    Jawahar
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 28 Aug 2012 Link to this post

    Hi,

    There are three table rows under that table row in which is placed the editable iframe of the content area and even when you hide the elements in these 3 rows the empty space will persists as shown in the following video: http://screencast.com/t/5wetzMUX, because this is a browser behavior.

    Best regards,
    Rumen
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jawahar
    jawahar avatar
    10 posts
    Member since:
    Aug 2012

    Posted 28 Aug 2012 Link to this post

    Thanks for your reply.
    What you mean is its not possible to remove that space in all browser. Am i right?

    Now i am testing it in IE8.

    Thanks,
    Jawahar.
  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 29 Aug 2012 Link to this post

    Hi,

    I have tested that scenario and found that the problem on live demos is caused by the doctype 1.1:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    If you change it with 1.0 Tranistional, the unwanted space will disappear:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            /* The following CSS needs to be copied to the page to produce textbox-like RadEditor */
             
            .reLeftVerticalSide, .reRightVerticalSide, .reToolZone, .reToolCell {
                background: white !important;
            }
             
            .reToolCell {
                display: none\9 !important; /* for all versions of IE in order to prevent border bottom disappearing */
            }
             
            .reContentCell {
                border-width: 0 !important;
            }
             
            .formInput {
                border: solid 1px black;
            }
             
            .RadEditor {
                filter: chroma(color=c2dcf0);
            }
             
            .reWrapper_corner, .reWrapper_center {
                display: none !important; /* for FF */
            }
             
            td.reWrapper_corner, td.reWrapper_center {
                display: block\9 !important; /* for all versions of IE */
            }
             
            .top {margin-top: 200px;}
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadEditor Height="150px" Width="300px" ToolsWidth="330px" EditModes="Design"
            ID="RadEditor1" runat="server" ToolbarMode="ShowOnFocus" ToolsFile="tooltext.xml" CssClass="top">
        </telerik:RadEditor>
        </form>
    </body>
    </html>

    If you however would like to use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">, you could archive a partial fix using CSS (marked yn yellow):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            /* The following CSS needs to be copied to the page to produce textbox-like RadEditor */
             
            .reLeftVerticalSide, .reRightVerticalSide, .reToolZone, .reToolCell {
                background: white !important;
            }
             
            .reToolCell {
                display: none\9 !important; /* for all versions of IE in order to prevent border bottom disappearing */
            }
             
            .reContentCell {
                border-width: 0 !important;
            }
             
            .formInput {
                border: solid 1px black;
            }
             
            .RadEditor {
                filter: chroma(color=c2dcf0);
            }
             
            .reWrapper_corner, .reWrapper_center {
                display: none !important; /* for FF */
            }
             
            td.reWrapper_corner, td.reWrapper_center {
                display: block\9 !important; /* for all versions of IE */
            }
             
            .top {
                margin-top: 200px;
            }
             
            /* doctype 1.1 fix */
             
            .reContentCell {
                height: 150px !important; /* this height should be qual to reWrapper element inline height, which in that case is 150px */
            }
             
            .reContentCell iframe {
                border-bottom: 1px solid #828282;
            }
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadEditor Height="150px" Width="300px" ToolsWidth="330px" EditModes="Design"
            ID="RadEditor1" runat="server" ToolbarMode="ShowOnFocus" ToolsFile="tooltext.xml" CssClass="top">
        </telerik:RadEditor>
        </form>
    </body>
    </html>

    As it is mentioned in the CSS commnet, you should check with firebug what is the inline height applied to reWrapper element and to apply the same height to reContentCell element using !important.

    Greetings,
    Bozhidar
    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.
Back to Top