This is a migrated thread and some comments may be shown as answers.

DropDownList (rcbSlide) does not line up with ComboBox

3 Answers 299 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Gregory asked on 15 Nov 2011, 07:07 PM

Capture-1280x1024.png

Capture-w1000px.png

Hello Telerik Team,
I have seen multiple postings about this problem but neither examples to reproduce or resolutions. I am providing an example to reproduce so hopefully you'll be able to quickly turnaround a resolution. In my sample, view in a screen width > 1000px to see the problem, and minimize to a width <= 1000 px to see it go away.

<sample type="Test_RadComboBox.aspx">

<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Test_RadComboBox.aspx.cs" Inherits="KR.IQ.Test_RadComboBox" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title>Page Title</title>

</head>

<body style="margin:0 auto;width:1000px;position:relative;">

<form id="form1" runat="server">

<ajax:ToolkitScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" CombineScripts="false"></ajax:ToolkitScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1" />

<script type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

</script>

<div id="container">

<div id="mainBody">

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" EnableSkinTransparency="false">

<div class="ajaxLoadingDiv" style="width:200px;height:100px;background-color:white;position:absolute; border:1px solid #3AB2E6;" >

<br />

<center><img src="/Images/Global/Ajax/ajax-loader.gif" alt="loading" />

<br />

<asp:Label runat="server" Text="Loading..." ID="lblProgressTemplateRAD"></asp:Label>

</center>

</div>

</telerik:RadAjaxLoadingPanel>

<div id="fi">

<telerik:RadComboBox ID="radComboBoxFIFilter" runat="server" Width="200px" AppendDataBoundItems="true" CssClass="floatRight">

<Items>

<telerik:RadComboBoxItem Text="SHOW ALL" Value="ALL" />

</Items>

</telerik:RadComboBox>

</div>

</form>

</body>

</html>

</sample>

<sample type="Test_RadComboBox.aspx.cs">

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace KR.IQ

{

public partial class Test_RadComboBox : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

FillRadComboBox();

}

/// <summary>

/// Sets up the featured insights control with the filter, default content types and homepage tag

/// </summary>

private void FillRadComboBox()

{

List<KeyValuePair<string, string>> filterItemList = new List<KeyValuePair<string, string>>()

{

new KeyValuePair<string, string>("One", "1"),

new KeyValuePair<string, string>("Two", "2"),

new KeyValuePair<string, string>("Three", "3")

};

radComboBoxFIFilter.DataValueField = "key";

radComboBoxFIFilter.DataTextField = "value";

radComboBoxFIFilter.DataSource = filterItemList;

radComboBoxFIFilter.DataBind();

}

</sample>

The problem is with page layouts that center the content of the body. This is done by a minimum of the following CSS styles on the body (included in my sample) but might be applied to an inner container:

* Auto margins left and right - margin: 0 auto;
* Fixed width for content - width: 1000px;
* Relative positioning - position: relative;

If the browser window makes the viewable width <= the fixed width, there is no problem with the RadComboBox DropDownList (rcbSlide) placement. However, if the viewable width is > the fixed width then the DropDownList (rcbSlide) is not positioned correctly. (In my case, my screen is 1280px wide.)
I have checked a few of other sites (arstechnica.com, apple.com, telerik.com) to see how they center their master content and they are using the same or a similar technique for centering horizontally (i.e, margin: 0 auto;). Could you please offer some advice on how to resolve this issue?

Thanks much,

Gregory Schilsson

DropDownList (rcbSlide) does not line up with ComboBox

3 Answers, 1 is accepted