This is a migrated thread and some comments may be shown as answers.
RadComboBox does not display properly
7 Answers 67 Views
This is a migrated thread and some comments may be shown as answers.
Kevin Sheng
Top achievements
Rank 1
Kevin Sheng asked on 10 May 2013, 03:49 AM
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

7 Answers, 1 is accepted

Sort by
0
msigman
Top achievements
Rank 2
answered on 10 May 2013, 04:32 PM
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
0
Kevin Sheng
Top achievements
Rank 1
answered on 10 May 2013, 10:15 PM

<%

 

@ 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>

0
Kevin Sheng
Top achievements
Rank 1
answered on 10 May 2013, 10:17 PM
Thank you Matt. My previous post is the markup and I should let you know that this is a DotNetNUke module.
 
Thanks
Kevin
0
msigman
Top achievements
Rank 2
answered on 10 May 2013, 10:28 PM
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
0
Kevin Sheng
Top achievements
Rank 1
answered on 10 May 2013, 10:29 PM
The page zoom is set to 100%.
 
Thanks
Kevin
0
Kevin Sheng
Top achievements
Rank 1
answered on 10 May 2013, 10:41 PM
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
0
Kevin Sheng
Top achievements
Rank 1
answered on 10 May 2013, 10:52 PM
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
Asked by
Kevin Sheng
Top achievements
Rank 1
Answers by
msigman
Top achievements
Rank 2
Kevin Sheng
Top achievements
Rank 1
Share this question
or