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

DropDownList (rcbSlide) does not line up with ComboBox

3 Answers 307 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

3 Answers, 1 is accepted

answered on 22 Nov 2011, 12:16 PM

Hello Gregory,

It's a two part problem:

1) There is width set to the body.
2) The combo is positioned in the body, but assumes it's as wide as the page.

The quick solution is to add a wrapper in the body, even better in the asp FORM to enclose the entire content and set those style to it.

In the mean time, I have logged this issue for reviewing.

Kind regards,
Ivan Zhekov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now