RadTextBox and RadDropDownList overlap when placed next to each other in table cell

[Galina]

I have a requirement to dynamically build a table on server side and fill it with either textbox(for entering strings) or textbox with a small drop down next to it to enter numbers and unit of measure.  My problem is that if I add both text and drop down to the same cell drop down overlaps text box for few pixels and is not aligned with other controls in rows above.normal text box size is 200(from CSS) and short is 150(from CSS). List box width is set to 50, so I expect controls to be aligned, but they are not. Screen shot attached.  How this can be fixed?

Here is my code :

CSS:

.myLabelCss {
            color: Red !important;
            width: 20px !important;
        }

        .myLabelCssDD {
            color: Red !important;
            width: 10px !important;
        }

        .CustomClass {
            width: 200px !important;
        }

        .CustomClass .riSingle .riTextBox {
                width: 200px !important;
            }

            .CustomClassShort{
            width: 150px !important;
        }

Table declaration

<asp:Table ID="tblParms" runat="server" Font-Names="Arial"        ForeColor="Black"  CellSpacing="10" BorderColor="Black" Width="100%"
                                                    EnableViewState="False" BorderStyle="None"   meta:resourcekey="tblParmsResource1">  </asp:Table>

 

VB code:

Private Sub buildControls()
        Dim tRow As New TableRow()
        tRow.ID = "MyRow1"
        Dim tCell As New TableCell()
        ' cell 1, label
        tCell.Text = "MyLabel1"
        tCell.VerticalAlign = VerticalAlign.Top
        tCell.Width = New Unit("30%")
        tRow.Cells.Add(tCell)
        'cell 2, controls
        tCell = New TableCell()
        tCell.VerticalAlign = VerticalAlign.Top
        tCell.HorizontalAlign = HorizontalAlign.Left
        tCell.Width = New Unit("30%")
        Dim txtBox = New RadTextBox()
        txtBox.ID = "MyText1"
        txtBox.CssClass = "CustomClassShort"
        txtBox.Label = "*"
        txtBox.LabelCssClass = "myLabelCss"
        txtBox.MaxLength = 15
        tCell.Controls.Add(txtBox)
        Dim ddUOMList As RadDropDownList = New RadDropDownList
        ddUOMList.ID = "MyList1"
        ddUOMList.Width = 50
        ddUOMList.CausesValidation = False
        Dim UOMItem As New DropDownListItem()
        UOMItem.Text = "A"
        UOMItem.Value = "A"
        ddUOMList.Items.Add(UOMItem)
        UOMItem = New DropDownListItem()
        UOMItem.Text = "mA"
        UOMItem.Value = "mA"
        ddUOMList.Items.Add(UOMItem)
        tCell.Controls.Add(ddUOMList)
        tRow.Cells.Add(tCell)
        tblParms.Rows.Add(tRow)
        tRow = New TableRow()
        tRow.ID = "MyRow2"
        tCell = New TableCell()
        ' cell 1, label
        tCell.Text = "MyLabel2"
        tCell.VerticalAlign = VerticalAlign.Top
        tCell.Width = New Unit("30%")
        tRow.Cells.Add(tCell)
        'cell 2, controls
        tCell = New TableCell()
        tCell.VerticalAlign = VerticalAlign.Top
        tCell.HorizontalAlign = HorizontalAlign.Left
        tCell.Width = New Unit("30%")
        txtBox = New RadTextBox()
        txtBox.ID = "MyText2"
        txtBox.CssClass = "CustomClass"
        txtBox.Label = "*"
        txtBox.LabelCssClass = "myLabelCss"
        txtBox.MaxLength = 15
        tCell.Controls.Add(txtBox)
        tRow.Cells.Add(tCell)
        tblParms.Rows.Add(tRow)
    End Sub

 

[Marin Bratanov]

Hi Galina, 

This is caused by the following CSS override only for the Classic render mode:

.CustomClassShort {
    width: 150px !important;
}

Removing it fixes the issue. In the Classic render mode, the CssClass is applied to the input, while the WrapperCssClass is applied to its wrapper element. It is important to note, however, that the inputs also have a default width and adding similar CSS overrides is likely to cause issues in the appearance because the HTML rendering is done with several elements.

With that said, I would recommend you switch to the Lightweight render mode that also allows for fluid design (i.e., width set in percentage) which may help you build layouts. Also, CSS rules are simpler, HTML rendering uses fewer elements and thus any necessary changes are easier to implement. Last but not least, using the WrapperCssClass will make overrides easier there because inner elements have fewer built-in rules.

Regards,
Marin Bratanov
Progress Telerik