Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadEditor Space Between Scrollbar and Border.

3 Answers 77 Views
UI for ASP.NET AJAX in ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.
jawahar
Top achievements
Rank 1
jawahar asked on 28 Aug 2012, 10:45 AM
RadEditorWithSpace.JPG
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

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 28 Aug 2012, 01:04 PM
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.
0
jawahar
Top achievements
Rank 1
answered on 29 Aug 2012, 04:33 AM
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.
0
Bozhidar
Telerik team
answered on 29 Aug 2012, 12:48 PM
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.
Tags
UI for ASP.NET AJAX in ASP.NET MVC
Asked by
jawahar
Top achievements
Rank 1
Answers by
Rumen
Telerik team
jawahar
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or