RadComboBox display issue

8 posts, 0 answers
  1. Cory
    Cory avatar
    21 posts
    Member since:
    Sep 2015

    Posted 08 Dec 2015 Link to this post

    Hi,

    I'm using a radcombobox to display a long list of projects for the user to pick from.  When I view it in the Visual Studio development environment... or when I run it from visual studio, everything looks great.  Unfortunately when it displays from the webserver - it loses the bottom border of the control.  It is a minor thing but is annoying to my users.

     My guess is that the CSS isn't correct on it but I have no idea where to start.  I'm just using standard skins.  I'll attach the two different views of the combobox.

     Here is how it is defined in my code:

    <td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; width: 670px; border-bottom: black 1px solid"
    align="left" colspan="3">
    <telerik:RadComboBox ID="RadComboPIF" runat="server" AllowCustomText="True" EmptyMessage="Find a PIF NUMBER" Filter="Contains" Height="400px" SortCaseSensitive="False" Width="600px"
    AutoPostBack="true" OnSelectedIndexChanged="RadComboPIF_SelectedIndexChanged" CausesValidation="False" EnableScreenBoundaryDetection="False">
    </telerik:RadComboBox>
    </td>

     

     

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    283 posts

    Posted 11 Dec 2015 Link to this post

    Hello Cory,

    I have implemented the RadComboBox scenario that you have described, but I wasn't able to reproduce the problem observed. Attached you will find my sample page. Could you modify it, applying your custom CSS if needed, so it reproduces the unexpected behavior and then send it back to us? This way we will be able to troubleshot the problem locally. It will also be useful if you could provide more details on the following points:
    • the version of the .NET Framework you are running your project on
    • which IE versions you are able to reproduce the issue in
    • whether the browser's Compatibility View is turned on

    I am looking forward to your replay.

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cory
    Cory avatar
    21 posts
    Member since:
    Sep 2015

    Posted 14 Dec 2015 in reply to Veselin Tsvetanov Link to this post

    Your sample application works perfectly.  Darn!  So now I have to go find the markup that is making things look weird.  Unfortunately there is a whole lot of markup involved and I have to move the code to a web server to see the issue. 

     

    Thanks for the help - unfortunately I guess this is something I'll need to find buried in the CSS.  The application is running in .NET 4.5 - IE11 - compatibility turned off.

    Cory

  5. Cory
    Cory avatar
    21 posts
    Member since:
    Sep 2015

    Posted 14 Dec 2015 in reply to Veselin Tsvetanov Link to this post

    I found the problem.  This application was converted from a .Net 1.1 and has the following at the start of every page:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

     

    If I remove that line - or make it  -
    <!DOCTYPE HTML >

    Then the combo box works - but a bunch of the other formatting breaks.  Can you confirm the correct setting for the DOCTYPE?  And confirm why that would break the combobox formatting?

    Thanks

    Cory

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    283 posts

    Posted 15 Dec 2015 Link to this post

    Hello Cory,

    Changing the DOCTYPE from HTML 4.0 (DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN") to HTML 5 (DOCTYPE html) should not actually affect the behavior and visual representation of RadComboBox as the control supports both standards. However, I have noticed that in your markup there are some attributes that are not valid for HTML 5. For example, you set the align attribute for the <td> in which you place the RadComboBox. I would suggest you to have a careful look at these as they may be the reason for all your formatting breaks. 

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Cory
    Cory avatar
    21 posts
    Member since:
    Sep 2015

    Posted 15 Dec 2015 in reply to Veselin Tsvetanov Link to this post

    I'm able to recreate the problem using your code and without the ALIGN item.  This is the stripped down version of the code you had attached... I made the table formatting vanilla and added <br> elements just to make the lack of a bottom border visible.

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ComboBoxMissingBottomBorder.aspx.cs" Inherits="ComboBoxMissingBottomBorder" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            td {
                border-right: black 1px solid;
                border-top: black 1px solid;
                border-left: black 1px solid;
                width: 670px;
                border-bottom: black 1px solid;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
         <telerik:RadScriptManager runat="server" ID="manager">
            </telerik:RadScriptManager>
            <div>
                <table>
                    <tr>
                        <td>
       <br>
                            <telerik:RadComboBox ID="RadComboPIF"
                                runat="server"
                                AllowCustomText="True"
                                EmptyMessage="Find a PIF NUMBER"
                                Filter="Contains"
                                Height="400px"
                                SortCaseSensitive="False"
                                Width="600px"
                                AutoPostBack="true"
                                OnSelectedIndexChanged="RadComboPIF_SelectedIndexChanged"
                                CausesValidation="False"
                                EnableScreenBoundaryDetection="False">
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" Text="Item 1" />
                                    <telerik:RadComboBoxItem runat="server" Text="Item 2" />
                                    <telerik:RadComboBoxItem runat="server" Text="Item 3" />
                                    <telerik:RadComboBoxItem runat="server" Text="Item 4" />
                                    <telerik:RadComboBoxItem runat="server" Text="Item 5" />
                                    <telerik:RadComboBoxItem runat="server" Text="Item 6" />
                                 </Items>
                            </telerik:RadComboBox><br><br>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>

     The code behind didn't change from your post.  When I execute the code under IIS - I still have the missing lower border.  If you change the doctype to <!DOCTYPE HTML>  then all looks fine - but of course that causes some other formatting issues in the real application. 

    I'm going to fix the application formatting so I can use the current doctype - the combobox has to display correctly on my pages - but it is very strange that this is happening if both doctypes are supported.

    Thanks,
    Cory

  8. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    283 posts

    Posted 16 Dec 2015 Link to this post

    Hello Cory,

    Unfortunately, I wasn't able to reproduce the described issue on my machine. Attached you will find screenshot of the page with HTML 4 DOCTYPE opened in IE 11 running on IIS web server.

    What I can suggest you to try is to change the Render mode property of the RadComboBox to Lightweight. Note that if you do that, you will have to apply the same Render mode to all RadComboBoxes you have in your page. This may solve the problem without the need of changing the DOCTYPE of the page. However, I cannot be sure about that, as I wasn't able to reproduce the issue locally.

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Cory
    Cory avatar
    21 posts
    Member since:
    Sep 2015

    Posted 16 Dec 2015 in reply to Veselin Tsvetanov Link to this post

    Thanks for the help anyways Veselin.  I proceeded with converting the DOCTYPE.  I have to look at every page in the application anyways so will just fix any display issues that occur.

     

    Cory

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017