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

2 posts, 0 answers
  1. Galina
    Galina avatar
    6 posts
    Member since:
    May 2018

    Posted 20 Dec 2018 Link to this post

    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

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5799 posts

    Posted 23 Dec 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top