RadComboBox does not display properly

[Kevin Sheng]

I have a very annoying issue: RadcomboBox does not display properly. It looks like the bottom line of control rectangular is missing
and the top line appears to be not 100% straight. This is shown in all IE, firefox and chrome. I attached a screenshot here. This issue makes screen look ugly.

I am using 2013.1.227.40 trial version.

Your help is appreciated.

Kevin

[msigman]

Hi Kevin,

I haven't experienced this issue before.  Can you please post your HTML markup for us to see?  Also, can you check the page to verify you're not encountering any JavaScript errors?

Thanks,
Matt

[Kevin Sheng]

<%

 

@ Control Language="C#" AutoEventWireup="true" CodeBehind="Edit.ascx.cs" Inherits="SEAS.Modules.Payments.Edit" %>

<%

 

@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %>

<%

 

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%

 

@ Register TagPrefix="dnn" TagName="SectionHead" Src="~/controls/SectionHeadControl.ascx" %>

　

　

<

 

 

script runat="server">

 

protected void cmdCancel_Click(object sender, EventArgs e)

{

Response.Redirect(DotNetNuke.Common.

 

Globals.NavigateURL(), true);

}

</

 

 

script>

　

<

 

 

script type="text/javascript" id="telerikClientEvents1">

 

//<![CDATA[

 

function RadComboBoxSalesTaxId_SelectedIndexChanged(sender, args) {

 

// Find the selected rate first

 

try {

 

var salesTaxRateId = $find("<%= RadComboBoxSalesTaxRateId.ClientID %>");

 

var selectedSalesTaxRateIdItem = salesTaxRateId.get_selectedItem();

 

var selectedRate = selectedSalesTaxRateIdItem.get_attributes().getAttribute("Rate");

 

var salesTaxRate = $find("<%= RadNumericTextBoxSalesTaxRate.ClientID %>");

salesTaxRate.set_value(selectedRate);

 

// alert(selectedRate);

calculateTopDown();

}

 

catch (e) {

alert(e);

}

}

 

function RadNumericTextBoxSalesTaxRate_OnBlur(sender, args) {

calculateTopDown();

}

 

function RadNumericTextBoxSubTotal_OnBlur(sender, args) {

calculateTopDown();

}

 

function RadNumericTextBoxSalesTaxAmount_OnBlur(sender, args) {

calculateBasedOnTax();

}

 

function calculateTopDown() {

 

var salesTaxRate = $find("<%= RadNumericTextBoxSalesTaxRate.ClientID %>");

 

var selectedRate = salesTaxRate.get_value();

 

//alert("rate:" + selectedRate);

 

var subTotalTextBox = $find("<%= RadNumericTextBoxSubTotal.ClientID %>");

 

var subTotal = subTotalTextBox.get_value();

 

//alert("subTotal:" + subTotal);

 

var salesTaxAmountTextBox = $find("<%= RadNumericTextBoxTaxAmount.ClientID %>");

 

var taxAmount = subTotal * selectedRate;

 

//alert("taxAmount:" + taxAmount );

salesTaxAmountTextBox.set_value(taxAmount);

 

var totalAmountTextBox = $find("<%= RadNumericTextBoxTotal.ClientID %>");

 

var total = taxAmount + subTotal;

totalAmountTextBox.set_value(total);

 

// alert("total:" + total);

}

 

function calculateBasedOnTax() {

 

var subTotalTextBox = $find("<%= RadNumericTextBoxSubTotal.ClientID %>");

 

var subTotal = subTotalTextBox.get_value();

 

var salesTaxAmountTextBox = $find("<%= RadNumericTextBoxTaxAmount.ClientID %>");

 

var taxAmount = salesTaxAmountTextBox.get_value();

 

if (taxAmount > subTotal) {

alert(

 

"You should enter a valid Sub-total Amount or Total Amount.");

 

return;

}

 

var rate = taxAmount / subTotal;

 

var salesTaxRate = $find("<%= RadNumericTextBoxSalesTaxRate.ClientID %>");

salesTaxRate.set_value(rate);

 

var totalAmountTextBox = $find("<%= RadNumericTextBoxTotal.ClientID %>");

 

var total = taxAmount + subTotal;

totalAmountTextBox.set_value(total);

}

 

function calculateBasedOnTotal() {

 

var totalAmountTextBox = $find("<%= RadNumericTextBoxTotal.ClientID %>");

 

var total = totalAmountTextBox.get_value();

 

// Tax Rate does not change

 

var salesTaxRate = $find("<%= RadNumericTextBoxSalesTaxRate.ClientID %>");

 

var rate = salesTaxRate.get_value();

 

var subTotal = total / (1 + rate);

 

var subTotalTextBox = $find("<%= RadNumericTextBoxSubTotal.ClientID %>");

subTotalTextBox.set_value(subTotal);

 

var salesTaxAmountTextBox = $find("<%= RadNumericTextBoxTaxAmount.ClientID %>");

 

var taxAmount = total - subTotal;

salesTaxAmountTextBox.set_value(taxAmount);

}

 

function RadNumericTextBoxTotal_OnBlur(sender, args) {

calculateBasedOnTotal();

}

 

//]]>

</

 

 

script>

<

 

 

style type="text/css">

 

.auto-style1 {

 

height: 156px;

}

 

.CommandButton {

}

 

.auto-style2 {

 

height: 30px;

}

</

 

 

style>

<

 

 

p>

 

<asp:Panel ID="systemField" runat="server" Visible="false">

 

<table class="style7" border="0">

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblPaymentsId" runat="server" controlname="lblPaymentsId" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadTextBox ID="RadTextBoxPaymentsId" runat="server" Text="" Skin="Office2010Black" ReadOnly="true"></telerik:RadTextBox></td>

 

<td class="SubHead">

 

<dnn:label id="lblUserId" runat="server" controlname="lblUserId" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadTextBox ID="RadTextBoxUserId" runat="server" Text="" Skin="Office2010Black" ReadOnly="true"></telerik:RadTextBox></td>

 

</tr>

 

</table>

 

</asp:Panel>

 

<dnn:SectionHead ID="dsh" runat="server" CssClass="Head" Text="Payment Info"

 

Section="tblPayments" ResourceKey="" IncludeRule="True" IsExpanded="True" />

 

<table class="style7" border="0" runat="server" id="tblPayments">

 

<tr>

 

<td colspan="4" width="200px">

 

<asp:Label ID="LabelError" runat="server" Text="" Font-Bold="True" ForeColor="Red"></asp:Label>

 

</td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblReferenceNo" runat="server" controlname="lblReferenceNo" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadTextBox ID="RadTextBoxReferenceNo" runat="server" Text="0" Width="200px" Skin="Office2010Black"></telerik:RadTextBox></td>

 

<td class="SubHead">

 

<dnn:label id="lblSequenceNo" runat="server" controlname="lblSequenceNo" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadTextBox ID="RadTextBoxSequenceNo" runat="server" Text="0" Width="200px" Skin="Office2010Black"></telerik:RadTextBox></td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblChequeNo" runat="server" controlname="lblChequeNo" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadTextBox ID="RadTextBoxChequeNo" runat="server" Text="0" Width="200px" Skin="Office2010Black"></telerik:RadTextBox></td>

 

<td class="SubHead">

 

<dnn:label id="lblCompanyId" runat="server" controlname="lblCompanyId" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadComboBox ID="RadComboBoxCompanyId" Runat="server" Skin="Office2010Black" Width="200px" BorderStyle="Solid">

 

</telerik:RadComboBox></td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblCustomerId" runat="server" controlname="lblCustomerId" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadComboBox ID="RadComboBoxCustomerId" Runat="server" Skin="Office2010Black" Width="200px" Height="200px"></telerik:RadComboBox></td>

 

<td class="SubHead" height="38px">

 

<dnn:label id="lblProjectId" runat="server" controlname="lblProjectId" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadComboBox ID="RadComboBoxProjectId" Runat="server" Skin="Office2010Black" Width="200px" BorderStyle="Solid">

 

</telerik:RadComboBox></td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblVendorInvoiceId" runat="server" controlname="lblVendorInvoiceId" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadComboBox ID="RadComboBoxVendorInvoiceId" Runat="server" Skin="Office2010Black" Width="200px" BorderStyle="Solid"></telerik:RadComboBox></td>

 

<td class="SubHead">

 

<dnn:label id="lblPaymentDate" runat="server" controlname="lblPaymentDate" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadDateTimePicker ID="RadDateTimePickerPaymentDate" Runat="server" Skin="Office2010Silver" width="200px" Enabled="True" MinDate="1900-01-01">

 

<timeview cellspacing="-1"></timeview>

 

<timepopupbutton imageurl="" hoverimageurl=""></timepopupbutton>

 

<calendar userowheadersasselectors="False" usecolumnheadersasselectors="False" skin="Office2010Silver"></calendar>

 

<dateinput displaydateformat="M/d/yyyy" dateformat="M/d/yyyy" labelwidth="40%"></dateinput>

 

<datepopupbutton imageurl="" hoverimageurl=""></datepopupbutton>

 

</telerik:RadDateTimePicker></td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblTransactionDate" runat="server" controlname="lblTransactionDate" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadDateTimePicker ID="RadDateTimePickerTransactionDate" Runat="server" Skin="Office2010Silver" width="200px" Enabled="True" MinDate="1900-01-01">

 

<timeview cellspacing="-1"></timeview>

 

<timepopupbutton imageurl="" hoverimageurl=""></timepopupbutton>

 

<calendar userowheadersasselectors="False" usecolumnheadersasselectors="False" skin="Office2010Silver"></calendar>

 

<dateinput displaydateformat="M/d/yyyy" dateformat="M/d/yyyy" labelwidth="40%"></dateinput>

 

<datepopupbutton imageurl="" hoverimageurl=""></datepopupbutton>

 

</telerik:RadDateTimePicker>

 

</td>

 

<td class="SubHead">

 

<dnn:label id="lblPaymentType" runat="server" controlname="lblPaymentType" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadComboBox ID="RadComboBoxPaymentType" Runat="server" Skin="Office2010Black" Width="200px" BorderStyle="Solid">

 

</telerik:RadComboBox></td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblCurrencyType" runat="server" controlname="lblCurrencyType" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadComboBox ID="RadComboBoxCurrencyType" Runat="server" Skin="Office2010Black" Width="200px" BorderStyle="Solid"></telerik:RadComboBox></td>

 

<td></td>

 

<td></td>

 

</tr>

 

</table>

　

 

<dnn:SectionHead ID="SectionHead2" runat="server" CssClass="Head" Text="Payment Amount"

 

Section="tblAmount" ResourceKey="" IncludeRule="True" IsExpanded="True" />

 

<table class="style7" border="0" runat="server" id="tblAmount">

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblSubTotal" runat="server" controlname="lblSubTotal" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadNumericTextBox ID="RadNumericTextBoxSubTotal" Runat="server" Culture="en-US" DbValueFactor="1" LabelWidth="64px" Skin="Office2010Black" Value="0" Width="160px" Font-Names="Courier New">

 

<numberformat zeropattern="n"></numberformat>

 

<clientevents onblur="RadNumericTextBoxSubTotal_OnBlur" />

 

</telerik:RadNumericTextBox>

 

</td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblSalesTaxRateId" runat="server" controlname="lblSalesTaxRateId" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadComboBox ID="RadComboBoxSalesTaxRateId" Runat="server" Skin="Office2010Black" Width="200px" BorderStyle="Solid" OnClientSelectedIndexChanged="RadComboBoxSalesTaxId_SelectedIndexChanged"></telerik:RadComboBox></td>

 

<td class="SubHead">

 

<dnn:label id="lblSalesTaxRate" runat="server" controlname="lblSalesTaxRate" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadNumericTextBox ID="RadNumericTextBoxSalesTaxRate" Runat="server" Culture="en-US" DbValueFactor="1" LabelWidth="64px" Skin="Office2010Black" Value="0" Width="160px" Font-Names="Courier New">

 

<numberformat zeropattern="n"></numberformat>

 

<clientevents onblur="RadNumericTextBoxSalesTaxRate_OnBlur" />

 

</telerik:RadNumericTextBox>

 

</td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblTaxAmount" runat="server" controlname="lblTaxAmount" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadNumericTextBox ID="RadNumericTextBoxTaxAmount" Runat="server" Culture="en-US" DbValueFactor="1" LabelWidth="64px" Skin="Office2010Black" Value="0" Width="160px" Font-Names="Courier New">

 

<numberformat zeropattern="n"></numberformat>

 

<clientevents onblur="RadNumericTextBoxSalesTaxAmount_OnBlur" />

 

</telerik:RadNumericTextBox></td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblTotal" runat="server" controlname="lblTotal" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadNumericTextBox ID="RadNumericTextBoxTotal" Runat="server" Culture="en-US" DbValueFactor="1" LabelWidth="64px" Skin="Office2010Black" Value="0" Width="160px" Font-Names="Courier New">

 

<numberformat zeropattern="n"></numberformat>

 

<clientevents onblur="RadNumericTextBoxTotal_OnBlur" />

 

</telerik:RadNumericTextBox>

 

</td>

 

</tr>

 

</table>

 

<dnn:SectionHead ID="SectionHead1" runat="server" CssClass="Head" Text="Comment"

 

Section="tblComment" ResourceKey="" IncludeRule="True" IsExpanded="True" />

 

<table class="style7" border="0" runat="server" id="tblComment">

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblNote" runat="server" controlname="lblNote" suffix=":"></dnn:label></td>

 

<td class="Normal" colspan="3" width="100%">

 

<telerik:RadTextBox ID="RadTextBoxNote" runat="server" Text="0" Width="100%" Skin="Office2010Black" Height="111px"></telerik:RadTextBox></td>

 

</tr>

 

</table>

 

<dnn:SectionHead ID="SectionHead3" runat="server" CssClass="Head" Text="Posting"

 

Section="tblPost" ResourceKey="" IncludeRule="True" IsExpanded="True" />

 

<table class="style7" border="0" runat="server" id="tblPost">

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblPostedDate" runat="server" controlname="lblPostedDate" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadDateTimePicker ID="RadDateTimePickerPostedDate" Runat="server" Skin="Office2010Silver" width="200px" Enabled="True" MinDate="1900-01-01">

 

<timeview cellspacing="-1"></timeview>

 

<timepopupbutton imageurl="" hoverimageurl=""></timepopupbutton>

 

<calendar userowheadersasselectors="False" usecolumnheadersasselectors="False" skin="Office2010Silver"></calendar>

 

<dateinput displaydateformat="M/d/yyyy" dateformat="M/d/yyyy" labelwidth="40%"></dateinput>

 

<datepopupbutton imageurl="" hoverimageurl=""></datepopupbutton>

 

</telerik:RadDateTimePicker></td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblPostedFlag" runat="server" controlname="lblPostedFlag" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<asp:CheckBox ID="CheckBoxPostedFlag" runat="server" />

 

</td>

 

<td></td>

 

<td></td>

 

</tr>

 

</table>

 

<dnn:SectionHead ID="SectionHead4" runat="server" CssClass="Head" Text="Additional Info"

 

Section="tblAdd" ResourceKey="" IncludeRule="True" IsExpanded="True" />

 

<table class="style7" border="0" runat="server" id="tblAdd">

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblAddDate" runat="server" controlname="lblAddDate" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadTextBox ID="RadTextBoxAddDate" runat="server" Text="0" Width="200px" Skin="Office2010Black"></telerik:RadTextBox>

 

</td>

 

<td></td>

 

<td></td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblAddUser" runat="server" controlname="lblAddUser" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadTextBox ID="RadTextBoxAddUser" runat="server" Text="0" Width="200px" Skin="Office2010Black"></telerik:RadTextBox></td>

 

<td class="SubHead">

 

<dnn:label id="lblModDate" runat="server" controlname="lblModDate" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadTextBox ID="RadTextBoxModDate" runat="server" Text="0" Width="200px" Skin="Office2010Black"></telerik:RadTextBox></td>

 

</tr>

 

<tr>

 

<td class="SubHead">

 

<dnn:label id="lblModUser" runat="server" controlname="lblModUser" suffix=":"></dnn:label></td>

 

<td class="Normal">

 

<telerik:RadTextBox ID="RadTextBoxModUser" runat="server" Text="0" Width="200px" Skin="Office2010Black"></telerik:RadTextBox></td>

 

<td></td>

 

<td></td>

 

</tr>

 

</table>

 

<hr />

 

<table>

 

<tr>

 

<td width="10%"></td>

 

<td>

 

<asp:LinkButton CssClass="CommandButton" ID="cmdUpdate" resourcekey="cmdUpdate"

 

runat="server" BorderStyle="none" Text="Update" OnClick="cmdUpdate_Click" Font-Bold="True" Font-Size="Larger"></asp:LinkButton>&nbsp;

 

</td>

 

<td width="10%"></td>

 

<td>

 

<asp:LinkButton CssClass="CommandButton" ID="cmdCancel" resourcekey="cmdCancel" runat="server" BorderStyle="none" Text="Cancel" CausesValidation="False" Font-Bold="True" Font-Size="Larger" OnClick="cmdCancel_Click"></asp:LinkButton>&nbsp;

 

</td>

 

<td width="10%"></td>

 

<td>

 

<asp:LinkButton CssClass="CommandButton" ID="cmdDelete" resourcekey="cmdDelete" runat="server" BorderStyle="none" Text="Delete" CausesValidation="False" Font-Bold="True" Font-Size="Larger" OnClick="cmdDelete_Click"></asp:LinkButton>&nbsp;

 

</td>

 

</tr>

 

</table>

[Kevin Sheng]

Thank you Matt. My previous post is the markup and I should let you know that this is a DotNetNUke module.
 
Thanks
Kevin

[msigman]

Kevin,

Before I dig into the code let me ask one thing, if you go to your browser Zoom settings, can you quickly verify it's at a 100%?  I was working on another site today and noticed the same behavior because the browser was at 110% zoom level.

Thanks!
Matt

[Kevin Sheng]

The page zoom is set to 100%.
 
Thanks
Kevin

[Kevin Sheng]

Hi, Matt,

I do see the zoom 100% makes it look much better in IE, but not for Chrome.

In IE it seems acceptable. If we can figure out how to fix for chrome, that would be awesome.

Thanks
Kevin

[Kevin Sheng]

I also looked at it in Firefox, it looks bad until I clicked "Zoom Text Only", however it is inconsistent and I do not know what is causing it.

So Chrome is the bad one.

Kevin