RadComboBox does not display properly

8 posts, 0 answers
  1. Kevin Sheng
    Kevin Sheng avatar
    6 posts
    Member since:
    Dec 2009

    Posted 09 May 2013 Link to this post

    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
  2. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 10 May 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin Sheng
    Kevin Sheng avatar
    6 posts
    Member since:
    Dec 2009

    Posted 10 May 2013 Link to this post

    <%

     

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

  5. Kevin Sheng
    Kevin Sheng avatar
    6 posts
    Member since:
    Dec 2009

    Posted 10 May 2013 Link to this post

    Thank you Matt. My previous post is the markup and I should let you know that this is a DotNetNUke module.
     
    Thanks
    Kevin
  6. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 10 May 2013 Link to this post

    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
  7. Kevin Sheng
    Kevin Sheng avatar
    6 posts
    Member since:
    Dec 2009

    Posted 10 May 2013 Link to this post

    The page zoom is set to 100%.
     
    Thanks
    Kevin
  8. Kevin Sheng
    Kevin Sheng avatar
    6 posts
    Member since:
    Dec 2009

    Posted 10 May 2013 Link to this post

    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
  9. Kevin Sheng
    Kevin Sheng avatar
    6 posts
    Member since:
    Dec 2009

    Posted 10 May 2013 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017