Problems after 2017 Upgrade

[RAJAT]

Hi,

I recently upgraded my application from the 2016 controls to the 2017 R2 controls and now I'm having issues with the Combobox and how it displays on the screen.

My combobox is within an Editform / form template of a RadGrid.  It is defined this way:

<code>

<telerik:RadComboBox ID="rddRouteInner" runat="server" DataTextField="route" DataValueField="route"
DropDownHeight="200px" DropDownWidth="350px" AllowCustomText="true" Font-Size="12px" >
</telerik:RadComboBox>

</code

Very simple - no CSS applied or anything else.  I added the Font-Size="12 px" because the font in the input was different from the drop down since the upgrade - which seems kind of crazy - but not a big deal.

Attached is what the output looks like.  The Input Box is taller than the surrounding drop down box - and I get multiple drop down boxes (at least started).  I have no idea how to troubleshoot this - when I just put a combobox on a page by itself - it works correctly.

Help?

 

Thanks!!!

[Rumen]

Hello,

Can you please ensure that there aren't mixed Render modes on the page?

All Telerik controls should have RenderMode set to Lightweight as explained in this help article Incorrect or Distorted Appearance:

There are mixed Render Modes of the controls on the page. For example, a RadButton on the master page has RenderMode="Classic" and a RadButton on a user control has RenderMode="Lightweight". All controls of the same type and their child controls must have the same render mode.

Best regards,
Rumen
Progress Telerik

[RAJAT]

Hello!

Can you please ensure that there aren't mixed Render modes on the page?
 All Telerik controls should have RenderMode set to Lightweight as explained in this help article

You were absolutely right the mixed rendermode values fixed the issue - setting everything to lightweight fixed the problems with the combobox.  Unfortunately it lead to a completely different issue - as attached.

In the screen shots below are the "correct" display of a radnumerictextbox (prior to the upgrade / change to lightweight TelerikNewIssueHeightCorrect.png) and the new display of it - where the size is too small to fit the number properly (TelerikNewIssueHeight2.png).  Adjusting the height property for the controls (TelerikNewIssueHeight.png) doesn't solve it as it changes the size of the encompassing div rather than the text box within the div.  Below is the code:

<p>/* Code with the height adjustment (TelerikNewIssueHeight2.png) */</p><p><tr><br>                                <td class="TDTitleBase">Number Of Pieces:</td><br>                                <td><br>                                    <telerik:RadNumericTextBox ID="rntNumberofPieces" runat="server" Visible="true" ValidationGroup="BasicInfo" CausesValidation="true" RenderMode="Lightweight" Height="30px"><br>                                        <NumberFormat DecimalDigits="0" /><br>                                    </telerik:RadNumericTextBox><br>                                    <asp:RequiredFieldValidator ID="rntNumberofPiecesValidator" runat="server" ControlToValidate="rntNumberofPieces" EnableClientScript="true" ValidationGroup="BasicInfo"  RenderMode="Lightweight"<br>                                        ErrorMessage="required field" CssClass="validator" ForeColor="Red"></asp:RequiredFieldValidator><br>                                </td><br>                            </tr><br>                            <tr><br>                                <td class="TDTitleBase">Base Instructions:</td><br>                                <td><br>                                    <telerik:RadDropDownList ID="rddInstruct" runat="server" Width="300px" DataValueField="instruct_code" DataTextField="description" RenderMode="Lightweight"><br>                                    </telerik:RadDropDownList><br>                                </td><br>                            </tr><br>                            <tr><br>                                <td class="TDTitleBase">Additional Instructions:</td><br>                                <td><br>                                    <telerik:RadTextBox ID="rtbAdditionalInstruct" runat="server" Visible="true" Width="550px" TextMode="MultiLine" MaxLength="500" RenderMode="Lightweight" Height="50px"></telerik:RadTextBox><br>                                </td><br>                            </tr><br></p><p>/* Code without the height adjustment */<br><tr><br>                                <td class="TDTitleBase">Number Of Pieces:</td><br>                                <td><br>                                    <telerik:RadNumericTextBox ID="rntNumberofPieces" runat="server" Visible="true" ValidationGroup="BasicInfo" CausesValidation="true" RenderMode="Lightweight"><br>                                        <NumberFormat DecimalDigits="0" /><br>                                    </telerik:RadNumericTextBox><br>                                    <asp:RequiredFieldValidator ID="rntNumberofPiecesValidator" runat="server" ControlToValidate="rntNumberofPieces" EnableClientScript="true" ValidationGroup="BasicInfo"  RenderMode="Lightweight"<br>                                        ErrorMessage="required field" CssClass="validator" ForeColor="Red"></asp:RequiredFieldValidator><br>                                </td><br>                            </tr><br>                            <tr><br>                                <td class="TDTitleBase">Base Instructions:</td><br>                                <td><br>                                    <telerik:RadDropDownList ID="rddInstruct" runat="server" Width="300px" DataValueField="instruct_code" DataTextField="description" RenderMode="Lightweight"><br>                                    </telerik:RadDropDownList><br>                                </td><br>                            </tr><br>                            <tr><br>                                <td class="TDTitleBase">Additional Instructions:</td><br>                                <td><br>                                    <telerik:RadTextBox ID="rtbAdditionalInstruct" runat="server" Visible="true" Width="550px" TextMode="MultiLine" MaxLength="500" RenderMode="Lightweight"></telerik:RadTextBox><br>                                </td><br>                            </tr></p>

So how do I fix this so the lightweight controls look like the original versions?

 

Thanks!

[Rumen]

Hello Rajat,

If you'd like to increase the text and body size of RadCombobox, all you need to do is to increase its font-size via the following class:

    <style>
        .RadComboBox { font-size: 40px !important; }
    </style>

 

Regards,
Rumen
Progress Telerik