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>
7 Answers, 1 is accepted
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
Rank 1
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
Rank 1
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
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
Rank 1
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
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
Rank 1
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