After upgrade, vertically adjacent text boxes overlap in HTML view

[Andrew]

I had some existing reports which were displaying properly in HTML, but after upgrading I had problems with boxes overlapping. These boxes would display overlapped in the HTML view, but display fine in the non-HTML view. 

So I tried creating a new report in a test project, and in this new project everything worked: adjacent boxes do not overlap. So, I copy and pasted some text boxes from my existing report to this test report, and the overlapping problem is still there. This is great news, because now we have a clear cut example.

Could somebody tell me why the bottom boxes (from my existing report) are overlapping in the HTML view, while the top boxes are displaying OK?


It appears that this forum will not accept zipped-up project files, but I can copy-and-paste the entire designer generated code.

namespace ReportingSandbox
{
    partial class AdjacentTextBoxes
    {
        #region Component Designer generated code
        /// <summary>
        /// Required method for telerik Reporting designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            Telerik.Reporting.Drawing.StyleRule styleRule1 = new Telerik.Reporting.Drawing.StyleRule();
            this.pageHeaderSection1 = new Telerik.Reporting.PageHeaderSection();
            this.topLeftBox = new Telerik.Reporting.TextBox();
            this.textBox1 = new Telerik.Reporting.TextBox();
            this.textBox2 = new Telerik.Reporting.TextBox();
            this.textBox3 = new Telerik.Reporting.TextBox();
            this.detail = new Telerik.Reporting.DetailSection();
            this.pageFooterSection1 = new Telerik.Reporting.PageFooterSection();
            this.overlappingBottomRight = new Telerik.Reporting.TextBox();
            this.overlappingTopRight = new Telerik.Reporting.TextBox();
            this.overlappingBottomLeft = new Telerik.Reporting.TextBox();
            this.overlappingTopLeft = new Telerik.Reporting.TextBox();
            ((System.ComponentModel.ISupportInitialize)(this)).BeginInit();
            //
            // pageHeaderSection1
            //
            this.pageHeaderSection1.Height = Telerik.Reporting.Drawing.Unit.Cm(3D);
            this.pageHeaderSection1.Items.AddRange(new Telerik.Reporting.ReportItemBase[] {
            this.topLeftBox,
            this.textBox1,
            this.textBox2,
            this.textBox3});
            this.pageHeaderSection1.Name = "pageHeaderSection1";
            //
            // topLeftBox
            //
            this.topLeftBox.Location = new Telerik.Reporting.Drawing.PointU(Telerik.Reporting.Drawing.Unit.Cm(3D), Telerik.Reporting.Drawing.Unit.Cm(1.0997999906539917D));
            this.topLeftBox.Name = "topLeftBox";
            this.topLeftBox.Size = new Telerik.Reporting.Drawing.SizeU(Telerik.Reporting.Drawing.Unit.Cm(4.1997990608215332D), Telerik.Reporting.Drawing.Unit.Cm(0.70000004768371582D));
            this.topLeftBox.Style.BorderStyle.Default = Telerik.Reporting.Drawing.BorderType.Solid;
            this.topLeftBox.Style.BorderStyle.Left = Telerik.Reporting.Drawing.BorderType.Solid;
            this.topLeftBox.Value = "Top Left Box";
            //
            // textBox1
            //
            this.textBox1.Location = new Telerik.Reporting.Drawing.PointU(Telerik.Reporting.Drawing.Unit.Cm(7.1999998092651367D), Telerik.Reporting.Drawing.Unit.Cm(1.0997999906539917D));
            this.textBox1.Name = "textBox1";
            this.textBox1.Size = new Telerik.Reporting.Drawing.SizeU(Telerik.Reporting.Drawing.Unit.Cm(3D), Telerik.Reporting.Drawing.Unit.Cm(0.70000004768371582D));
            this.textBox1.Style.BorderStyle.Default = Telerik.Reporting.Drawing.BorderType.Solid;
            this.textBox1.Style.BorderStyle.Left = Telerik.Reporting.Drawing.BorderType.Solid;
            this.textBox1.Value = "Top Right box";
            //
            // textBox2
            //
            this.textBox2.Location = new Telerik.Reporting.Drawing.PointU(Telerik.Reporting.Drawing.Unit.Cm(3D), Telerik.Reporting.Drawing.Unit.Cm(1.7999999523162842D));
            this.textBox2.Name = "textBox2";
            this.textBox2.Size = new Telerik.Reporting.Drawing.SizeU(Telerik.Reporting.Drawing.Unit.Cm(4.1997990608215332D), Telerik.Reporting.Drawing.Unit.Cm(0.70000004768371582D));
            this.textBox2.Style.BorderStyle.Default = Telerik.Reporting.Drawing.BorderType.Solid;
            this.textBox2.Style.BorderStyle.Left = Telerik.Reporting.Drawing.BorderType.Solid;
            this.textBox2.Value = "Bottom Left box";
            //
            // textBox3
            //
            this.textBox3.Location = new Telerik.Reporting.Drawing.PointU(Telerik.Reporting.Drawing.Unit.Cm(7.1999998092651367D), Telerik.Reporting.Drawing.Unit.Cm(1.7999999523162842D));
            this.textBox3.Name = "textBox3";
            this.textBox3.Size = new Telerik.Reporting.Drawing.SizeU(Telerik.Reporting.Drawing.Unit.Cm(3D), Telerik.Reporting.Drawing.Unit.Cm(0.70000004768371582D));
            this.textBox3.Style.BorderStyle.Default = Telerik.Reporting.Drawing.BorderType.Solid;
            this.textBox3.Style.BorderStyle.Left = Telerik.Reporting.Drawing.BorderType.Solid;
            this.textBox3.Value = "Bottom Right Box";
            //
            // detail
            //
            this.detail.Height = Telerik.Reporting.Drawing.Unit.Cm(3D);
            this.detail.Name = "detail";
            //
            // pageFooterSection1
            //
            this.pageFooterSection1.Height = Telerik.Reporting.Drawing.Unit.Cm(3D);
            this.pageFooterSection1.Items.AddRange(new Telerik.Reporting.ReportItemBase[] {
            this.overlappingBottomRight,
            this.overlappingTopRight,
            this.overlappingBottomLeft,
            this.overlappingTopLeft});
            this.pageFooterSection1.Name = "pageFooterSection1";
            //
            // overlappingBottomRight
            //
            this.overlappingBottomRight.CanGrow = false;
            this.overlappingBottomRight.CanShrink = true;
            this.overlappingBottomRight.Location = new Telerik.Reporting.Drawing.PointU(Telerik.Reporting.Drawing.Unit.Cm(2.4727180004119873D), Telerik.Reporting.Drawing.Unit.Cm(1.2002004384994507D));
            this.overlappingBottomRight.Multiline = false;
            this.overlappingBottomRight.Name = "overlappingBottomRight";
            this.overlappingBottomRight.Size = new Telerik.Reporting.Drawing.SizeU(Telerik.Reporting.Drawing.Unit.Cm(10.949999809265137D), Telerik.Reporting.Drawing.Unit.Cm(0.89999955892562866D));
            this.overlappingBottomRight.Style.BorderColor.Default = System.Drawing.Color.DarkGray;
            this.overlappingBottomRight.Style.BorderStyle.Default = Telerik.Reporting.Drawing.BorderType.Solid;
            this.overlappingBottomRight.Style.Padding.Bottom = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingBottomRight.Style.Padding.Left = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingBottomRight.Style.Padding.Right = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingBottomRight.Style.Padding.Top = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingBottomRight.TextWrap = true;
            this.overlappingBottomRight.Value = "The average number of plays per player";
            //
            // overlappingTopRight
            //
            this.overlappingTopRight.CanGrow = true;
            this.overlappingTopRight.CanShrink = false;
            this.overlappingTopRight.Location = new Telerik.Reporting.Drawing.PointU(Telerik.Reporting.Drawing.Unit.Cm(2.4666581153869629D), Telerik.Reporting.Drawing.Unit.Cm(0.39999979734420776D));
            this.overlappingTopRight.Multiline = true;
            this.overlappingTopRight.Name = "overlappingTopRight";
            this.overlappingTopRight.Size = new Telerik.Reporting.Drawing.SizeU(Telerik.Reporting.Drawing.Unit.Cm(10.952517509460449D), Telerik.Reporting.Drawing.Unit.Cm(0.80000042915344238D));
            this.overlappingTopRight.Style.BorderColor.Default = System.Drawing.Color.DarkGray;
            this.overlappingTopRight.Style.BorderStyle.Default = Telerik.Reporting.Drawing.BorderType.Solid;
            this.overlappingTopRight.Style.Padding.Bottom = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingTopRight.Style.Padding.Left = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingTopRight.Style.Padding.Right = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingTopRight.Style.Padding.Top = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingTopRight.TextWrap = true;
            this.overlappingTopRight.Value = "The number of media players the file was played on during that day";
            //
            // overlappingBottomLeft
            //
            this.overlappingBottomLeft.CanGrow = false;
            this.overlappingBottomLeft.CanShrink = true;
            this.overlappingBottomLeft.Location = new Telerik.Reporting.Drawing.PointU(Telerik.Reporting.Drawing.Unit.Cm(0.800000011920929D), Telerik.Reporting.Drawing.Unit.Cm(1.2002004384994507D));
            this.overlappingBottomLeft.Multiline = false;
            this.overlappingBottomLeft.Name = "overlappingBottomLeft";
            this.overlappingBottomLeft.Size = new Telerik.Reporting.Drawing.SizeU(Telerik.Reporting.Drawing.Unit.Cm(1.6725180149078369D), Telerik.Reporting.Drawing.Unit.Cm(0.89979928731918335D));
            this.overlappingBottomLeft.Style.BorderColor.Default = System.Drawing.Color.DarkGray;
            this.overlappingBottomLeft.Style.BorderStyle.Default = Telerik.Reporting.Drawing.BorderType.Solid;
            this.overlappingBottomLeft.Style.Padding.Bottom = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingBottomLeft.Style.Padding.Left = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingBottomLeft.Style.Padding.Right = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingBottomLeft.Style.Padding.Top = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingBottomLeft.TextWrap = true;
            this.overlappingBottomLeft.Value = "Plays:";
            //
            // overlappingTopLeft
            //
            this.overlappingTopLeft.CanGrow = true;
            this.overlappingTopLeft.CanShrink = false;
            this.overlappingTopLeft.Location = new Telerik.Reporting.Drawing.PointU(Telerik.Reporting.Drawing.Unit.Cm(0.800000011920929D), Telerik.Reporting.Drawing.Unit.Cm(0.39999979734420776D));
            this.overlappingTopLeft.Multiline = true;
            this.overlappingTopLeft.Name = "overlappingTopLeft";
            this.overlappingTopLeft.Size = new Telerik.Reporting.Drawing.SizeU(Telerik.Reporting.Drawing.Unit.Cm(1.666458010673523D), Telerik.Reporting.Drawing.Unit.Cm(0.80000042915344238D));
            this.overlappingTopLeft.Style.BorderColor.Default = System.Drawing.Color.DarkGray;
            this.overlappingTopLeft.Style.BorderStyle.Default = Telerik.Reporting.Drawing.BorderType.Solid;
            this.overlappingTopLeft.Style.Padding.Bottom = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingTopLeft.Style.Padding.Left = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingTopLeft.Style.Padding.Right = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingTopLeft.Style.Padding.Top = Telerik.Reporting.Drawing.Unit.Point(3D);
            this.overlappingTopLeft.TextWrap = true;
            this.overlappingTopLeft.Value = "Players:";
            //
            // AdjacentTextBoxes
            //
            this.Items.AddRange(new Telerik.Reporting.ReportItemBase[] {
            this.pageHeaderSection1,
            this.detail,
            this.pageFooterSection1});
            this.Name = "AdjacentTextBoxes";
            this.PageSettings.Margins = new Telerik.Reporting.Drawing.MarginsU(Telerik.Reporting.Drawing.Unit.Mm(25.399999618530273D), Telerik.Reporting.Drawing.Unit.Mm(25.399999618530273D), Telerik.Reporting.Drawing.Unit.Mm(25.399999618530273D), Telerik.Reporting.Drawing.Unit.Mm(25.399999618530273D));
            this.PageSettings.PaperKind = System.Drawing.Printing.PaperKind.A4;
            this.Style.BackgroundColor = System.Drawing.Color.White;
            styleRule1.Selectors.AddRange(new Telerik.Reporting.Drawing.ISelector[] {
            new Telerik.Reporting.Drawing.TypeSelector(typeof(Telerik.Reporting.TextItemBase)),
            new Telerik.Reporting.Drawing.TypeSelector(typeof(Telerik.Reporting.HtmlTextBox))});
            styleRule1.Style.Padding.Left = Telerik.Reporting.Drawing.Unit.Point(2D);
            styleRule1.Style.Padding.Right = Telerik.Reporting.Drawing.Unit.Point(2D);
            this.StyleSheet.AddRange(new Telerik.Reporting.Drawing.StyleRule[] {
            styleRule1});
            this.Width = Telerik.Reporting.Drawing.Unit.Cm(15D);
            ((System.ComponentModel.ISupportInitialize)(this)).EndInit();

        }
        #endregion

        private Telerik.Reporting.PageHeaderSection pageHeaderSection1;
        private Telerik.Reporting.DetailSection detail;
        private Telerik.Reporting.PageFooterSection pageFooterSection1;
        private Telerik.Reporting.TextBox topLeftBox;
        private Telerik.Reporting.TextBox textBox1;
        private Telerik.Reporting.TextBox textBox2;
        private Telerik.Reporting.TextBox textBox3;
        private Telerik.Reporting.TextBox overlappingBottomRight;
        private Telerik.Reporting.TextBox overlappingTopRight;
        private Telerik.Reporting.TextBox overlappingBottomLeft;
        private Telerik.Reporting.TextBox overlappingTopLeft;
    }
}

[Andrew]

As is so often the case, the act of explaining the problem helped me solve it.

When I set the  property Style \ Padding \ Bottom from 3px to 0px, the overlapping problem went away.

I don't know if that's the best workaround, but at least I can get the report to look OK again.

[IvanY]

Hello Andrew,

Thank you for the provided input. We are happy to know that you have figured out the issue on your own. You can rest assured that we will further investigate the padding behavior in a table.

Kind regards,
IvanY
the Telerik team