[Solved] Combobox list appears off to the left of combo

[Joao Araujo]

Hello,
     I upgraded my application to the version 2009.2, out of 2008.2 .
     Now all my combos lists  are off the center of the combobox. In fact they are showing way far the
     combo boxes in any Browser.

     Anyone has an idea why?

    Thanks,



John,

[Kamen Bundev]

Hi Joao,

Skin rendering in Q2 2009 is quite different than in Q2 2008. Are you using custom skins? Also do you have some additional CSS applied on the page? If you have, can you post them here along with the RadComboBox XHTML markup (or you can open a ticket and send a sample project or live URL)? Thank you in advance.

Sincerely yours,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joao Araujo]

Hello,

  Yes I have some custom css, very simple css to organize the page . They are div contents.
  I basically removed almost everything without success. Bellow is my skin for the components.
  But I do not see where it is adding anything.  It should be something trick but I really can find it, or
  find a way to fix it.

  BTW, I already updated for the newest version 2009.2.831.... 

  My master page has a wrapper on it. .

  here is the page
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Item.ascx.cs" Inherits="SpykerMetals.Web.Admin.Company.Item" %>
<%@ Register Src="../User/Item.ascx" TagName="Item" TagPrefix="User" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="Telerik" %>

<table class="ItemTable">
    <tr>
        <td class="RightSide">
            Country
        </td>
        <td class="RightSide">
            State
        </td>
    </tr>
    <tr>
        <td class="LeftSide">
            <Telerik:RadComboBox ID="CountryComboBox" runat="server" DataTextField="Name" DataValueField="CountryID" Width="100px"
                    OnItemsRequested="CountryComboBox_ItemsRequested" OnSelectedIndexChanged="CountryComboBox_SelectedIndexChanged">
            </Telerik:RadComboBox>
            <asp:RequiredFieldValidator ID="CountryRequiredFieldValidator" runat="server" ControlToValidate="CountryComboBox"
                ErrorMessage="Country is required." ToolTip="Country is required.">*</asp:RequiredFieldValidator>
        </td>
        <td class="RightSide">
            <Telerik:RadComboBox ID="StateComboBox" runat="server" DataTextField="Name" DataValueField="StateID"
                    OnItemsRequested="  StateComboBox_ItemsRequested">
            </Telerik:RadComboBox>
            <asp:RequiredFieldValidator ID="StateRequiredFieldValidator" runat="server" ControlToValidate="StateComboBox"
                ErrorMessage="State is required." ToolTip="State is required.">*</asp:RequiredFieldValidator>
        </td>
    </tr>
</table>
<asp:Panel ID="FooterPanel" runat="server">
    <table class="ItemTable">
        <tr>
            <td>
                <asp:Panel ID="InformationPanel" runat="server">
                    <table class="ItemTable">
                        <tr>
                            <td class="LeftSide">
                                Company ID
                            </td>
                            <td class="RightSide">
                                Created
                            </td>
                        </tr>
                        <tr>
                            <td class="LeftSide">
                                <Telerik:RadTextBox ID="IdTextBox" runat="server" Enabled="false">
                                </Telerik:RadTextBox>
                            </td>
                            <td class="RightSide">
                                <Telerik:RadDateInput ID="CreatedDateInput" runat="server" Enabled="false">
                                </Telerik:RadDateInput>
                            </td>
                        </tr>
                    </table>
                </asp:Panel>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="CancelButton" CssClass="Button" runat="server"
                    CausesValidation="false" Text="Cancel" OnClick="CancelButton_Click" OnClientClick="return confirm('You realy want to cancel?')" />
                &nbsp;
                <asp:Button ID="SaveButton" CssClass="Button" runat="server"
                    Text="Save" OnClick="SaveButton_Click" />
                <asp:Button ID="DeleteButton" CssClass="Button" runat="server"
                    Text="Delete" OnClick="DeleteButton_Click" OnClientClick="return confirm('You realy want to delete this item?')" />
            </td>
        </tr>
    </table>
</asp:Panel>


  here is the skin.



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

<Telerik:RadTextBox
    runat="server" Skin="Telerik" Width="200px"></Telerik:RadTextBox>

<Telerik:RadDateInput
    runat="server" Skin="Telerik" Width="200px"></Telerik:RadDateInput>
    
<Telerik:RadDatePicker
    Runat="server" Skin="Telerik" Width="200px">
    <DateInput Runat="server" ></DateInput>
    <Calendar Runat="server" ></Calendar>
</Telerik:RadDatePicker>

<Telerik:RadNumericTextBox
    runat="server" Skin="Telerik" Width="200px"></Telerik:RadNumericTextBox>
<%--    
<Telerik:RadComboBox
    runat="server" Skin="Telerik" Width="200px"
    LoadingMessage="Loading..." Height="170px"
    EnableLoadOnDemand="True" HighlightTemplatedItems="True" ></Telerik:RadComboBox>
--%>
<Telerik:RadGrid
    runat="server" Skin="Black" Width="100%"
    AllowPaging="True" AllowMultiRowSelection="False"
    PageSize="10" AutoGenerateColumns="False" ShowStatusBar="True"
    EnableAJAX="True" EnableAJAXLoadingTemplate="True" LoadingTemplateTransparency="50">

    <PagerStyle Mode="NextPrevAndNumeric" />

    <StatusBarSettings LoadingText="Loading" ReadyText="Ready" />
                            
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
    </ClientSettings>

    <MasterTableView CommandItemDisplay="Top"
        AutoGenerateColumns="False" Width="100%">
        
        <CommandItemTemplate>
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td colspan="2" style="height: 5px;"></td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <asp:LinkButton ID="NewLinkButton" runat="server" CausesValidation="false" CommandName="MyNew"><img style="border:0px" alt="" src="~\Images\Buttons\FileAdd.gif" runat="server" id="NewImage" /></asp:LinkButton>
                    </td>
                    <td style="text-align: right;">
                        <asp:LinkButton ID="RefreshLinkButton" runat="server" CausesValidation="false" CommandName="MyRefresh"><img style="border:0px" alt="" src="~\Images\Refresh.gif" runat="server" id="RefreshImage" /></asp:LinkButton>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="height: 3px;"></td>
                </tr>
            </table>
        </CommandItemTemplate>
        
        <Columns>
            <Telerik:GridButtonColumn ButtonType="ImageButton"
                ImageUrl="~\Images\Buttons\FileEdit.gif"
                UniqueName="EditColumn"
                CommandName="MyEdit"
                Text="Edit">
                <HeaderStyle Width="3%" />
                <ItemStyle HorizontalAlign="Center" />
            </Telerik:GridButtonColumn>
            
            <Telerik:GridButtonColumn ButtonType="ImageButton"
                ImageUrl="~\Images\Buttons\Trash.gif"
                UniqueName="DeleteColumn"
                CommandName="MyDelete"
                Text="Delete">
                <HeaderStyle Width="3%" />
                <ItemStyle HorizontalAlign="Center" />
            </Telerik:GridButtonColumn>
        </Columns>
        
    </MasterTableView>
    
</Telerik:RadGrid>

THE CSS
body
{
}
/*
    menu
*/
#mainnav
{
    background-color: #000000;
    border-bottom: 1px solid #000000;
    border-bottom-color: #FFFF99;
}

* html #mainnav tr {height:1.4em;}

#mainnav .item
{
    padding: 2px 7px;
    background-color: #000000;
    color: #CCCCCC;
    font-weight: bold;
}

* html #mainnav .item {padding:0 20px;}

#mainnav .selected
{
    color: #E9DA95;
}

#mainnav .hover
{
    color: #000000;
    background-color: #E9DA95;
}

#wrapper {
    margin: 0 auto;
    width: 950px;
    min-height:100%;
    height:auto;
    position:relative;
}



THank you

[Joao Araujo]

Hello,

      I should add that I have the combobox in a control, something along those lines below.

      Master page
               Default page
                    List Control
                    Item Control


here is the default page

<%@ Page Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="SpykerMetals.Web.Admin.Company.Default" Theme="AdminTheme" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="Telerik" %>
<%@ Register Src="List.ascx" TagName="List" TagPrefix="Company" %>
<%@ Register Src="Item.ascx" TagName="Item" TagPrefix="Company" %>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="Header" runat="server">
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="Body" runat="server">
    <asp:UpdatePanel ID="CompanyUpdatePanel" runat="server">
        <ContentTemplate>
            <Telerik:RadMultiPage ID="CompanyMultiPage" runat="server">
                <Telerik:RadPageView ID="ListView" runat="server">
                    <Company:List ID="CompanyList" runat="server" />
                </Telerik:RadPageView>
                <Telerik:RadPageView ID="ItemView" runat="server">
                    <Company:Item ID="CompanyItem" runat="server" />
                </Telerik:RadPageView>
            </Telerik:RadMultiPage>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

     





Joao,

[Joao Araujo]

Hello,
    I found the problem, thanks for your help.

   I have the following wrapper around my content.

 #wrapper {
    margin: 0 auto;
    width: 950px;
    min-height:100%;
    height:auto;
/*    position:relative;
*/
}

   As you see it has the position:relative    property / value pair set. The relative option is causing the problem.

  If I comment the position:relative everything comes back to work.

 Though I still do now the reason for that problem . I had to delve into other scripts to fix it, which
   I do not have time right now.

   Thanks for your support and attention.