RadDatePicker positioning is different between IE and Mozilla

[Marc]

The following controls position correctly when the DatePopupbutton visible property is true
The labels are directly above the datepicker controls using IE 6 and firefox 3.04
But when I set the visible property to false then the controls are not positioned the same between the two browsers?????


####################################################################################################
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="daterange.ascx.cs" Inherits="UserControls_daterange" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

  <asp:Label ID="Label1" runat="server"
    style="z-index: 1; left: 0px; top: 6px; position:absolute; height: 15px; width: 67px;"
        Text="Start Date"  Font-Size="X-Small"></asp:Label>
        
<telerik:RadDatePicker ID="_Start" runat="server"
    style="z-index: 1; left: 0px; top: 27px; position: absolute; height: 21px; width: 125px">
</telerik:RadDatePicker>
                  
<asp:Label ID="Label2" runat="server"
        style="z-index: 2; left: 0px; top: 57px; position:absolute; height: 15px; width: 67px"
        Text="End Date" Font-Size="X-Small"></asp:Label>

<telerik:RadDatePicker ID="_End" runat="server"
    style="z-index: 1; left: 0px; top: 77px; position: absolute; height: 21px; width: 125px">
</telerik:RadDatePicker>
########################################################################################


After setting DatePopupbutton visible property to false


########################################################################################
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="daterange.ascx.cs" Inherits="UserControls_daterange" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

  <asp:Label ID="Label1" runat="server"
    style="z-index: 1; left: 0px; top: 6px; position:absolute; height: 15px; width: 67px;"
        Text="Start Date"  Font-Size="X-Small"></asp:Label>
        
<telerik:RadDatePicker ID="_Start" runat="server"
    
    style="z-index: 1; left: 0px; top: 27px; position: absolute; height: 21px; width: 125px"
    Culture="English (United States)">
    <DateInput Height="21px" Width="125px">
    </DateInput>
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"></Calendar>

<DatePopupButton ImageUrl="" HoverImageUrl="" Visible="False"></DatePopupButton>
</telerik:RadDatePicker>
                  
<asp:Label ID="Label2" runat="server"
        style="z-index: 2; left: 0px; top: 57px; position:absolute; height: 15px; width: 67px"
        Text="End Date" Font-Size="X-Small"></asp:Label>

<telerik:RadDatePicker ID="_End" runat="server"
    
    style="z-index: 1; left: 0px; top: 77px; position: absolute; height: 21px; width: 125px"
    Culture="English (United States)">
    <DateInput Height="21px" Width="125px">
    </DateInput>
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"></Calendar>

<DatePopupButton ImageUrl="" HoverImageUrl="" Visible="False"></DatePopupButton>
</telerik:RadDatePicker>
########################################################################################

[Dimo]

Hello Marc,

Please add one of the following CSS rules to fix the problem:

.rdfd_ { display:none !important }

or

.rdfd_ { position:absolute !important }



Greetings,
Dimo
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.

[OMAIR]

Can you please sow me example how to resolve this issue i am also haveving the same

<

 

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>

<%

 

--<style type="text/css">

.riSingle.riTextBox

{

width: 100% !important;

}

</style>--

 

%>

<

 

div class="popup" >

<

 

div style="padding:0px 20px 20px 20px">

<

 

div class="fixedwidthtable">

<

 

div class="navigator"></div>

<telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">

 

<script type="text/javascript">

 

function OnClientItemsRequesting(sender, args)

{

var context = args.get_context();

context[

"FilterString"] = args.get_text();

context[

"ItemsCount"] = "10";

}

</script>

 

</telerik:RadScriptBlock>

 

<

 

div>

<

 

div class="addeditformDiv">

<

 

h2><span>Allocation Details</span></h2>

 

<div>

<

 

span class="frmlabel mandatory">User</span>

<%

 

-- <telerik:RadComboBox ID="RadCmbUser" Runat="server"

DataTextField="FullName" DataValueField = "UserId"

AutoPostBack="false" CausesValidation="false"

AppendDataBoundItems="true"

EnableLoadOnDemand="true" ShowMoreResultsBox="true"

EnableVirtualScrolling="true"

onitemsrequested="RadCmbUser_ItemsRequested" >

</telerik:RadComboBox>--

 

%>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="RadCmbUser" ValidationGroup="AllocationSubmission"

 

runat="server" Display="Dynamic" Text="*" ErrorMessage="Select Employee from the list" ></asp:RequiredFieldValidator>

 

<telerik:RadComboBox ID="RadCmbUser" runat="server"

AppendDataBoundItems="true" AutoPostBack="true" MarkFirstMatch="True"

OnClientItemsRequesting = "OnClientItemsRequesting"

EnableLoadOnDemand = '<%# DataItem is Telerik.Web.UI.GridInsertionObject %>' EnableItemCaching="true" ZIndex="7020"

onselectedindexchanged="RadCmbUser_SelectedIndexChanged">

 

<ExpandAnimation Type="none" />

 

<CollapseAnimation Type="none" />

 

<WebServiceSettings Path="WebService/UserProvider.asmx" Method="UserProviderService" />

 

</telerik:RadComboBox>

 

<span class="frmlabelRightTelerik mandatory">Connection</span>

 

<%

-- <telerik:RadComboBox ID="RadCmbConnection" Runat="server" AutoPostBack="true"

DataTextField="NationalNumber" DataValueField = "ConnectionId"

AppendDataBoundItems="true"

EnableLoadOnDemand="true" ShowMoreResultsBox="true"

EnableVirtualScrolling="true"

onitemsrequested="RadCmbConnection_ItemsRequested"

onselectedindexchanged="RadCmbConnection_SelectedIndexChanged">

</telerik:RadComboBox> --

 

%>

<asp:RequiredFieldValidator ID="rfvValue" ControlToValidate="RadCmbConnection" ValidationGroup="AllocationSubmission"

 

runat="server" Display="Dynamic" Text="*" ErrorMessage="Select Connection from the list" ></asp:RequiredFieldValidator>

 

<telerik:RadComboBox ID="RadCmbConnection" runat="server"

AppendDataBoundItems="true" AutoPostBack="true"

 

OnClientItemsRequesting = "OnClientItemsRequesting" ZIndex="7020" MarkFirstMatch="true"

 

EnableLoadOnDemand= '<%# DataItem is Telerik.Web.UI.GridInsertionObject %>' EnableItemCaching="true"

onselectedindexchanged="RadCmbConnection_SelectedIndexChanged">

 

<ExpandAnimation Type="none" />

 

<CollapseAnimation Type="none" />

 

<WebServiceSettings Path="WebService/ConnectionProvider.asmx" Method="GetConnectionAllInstock" />

 

</telerik:RadComboBox>

 

</

 

div>

<

 

div>

<

 

span class="frmlabel">Connection Type</span>

<

 

telerik:RadTextBox Enabled="false" ID="txtConnectionType" Text='<%# DataBinder.Eval( Container, "DataItem.ConnectionTypeName") %>' runat="server" width="157px" ></telerik:RadTextBox>

 

<

 

span class="frmlabelRight">Provider</span>

<

 

telerik:RadTextBox Enabled="false" ID="txtProvider" Text='<%# DataBinder.Eval( Container, "DataItem.AllocationNationalNumberProvider") %>' runat="server" width="157px" ></telerik:RadTextBox>

 

</div>

 

<div>

<

 

span class="frmlabel">Connection Date</span>

 

<telerik:RadDatePicker ID="dtCreatedDate" CssClass ="riSingle" Enabled="false" runat="server" MinDate="12/12/1899 8:00:00 AM" MaxDate="12/12/9999 8:00:00 AM" DbSelectedDate='<%# DataBinder.Eval( Container, "DataItem.ConnectionFromDate") %>'

 

width="160px">

<

 

Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"></Calendar>

<

 

DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>

<

 

DateInput DisplayDateFormat="dd-MMM-yyyy" DateFormat="dd-MMM-yyyy"></DateInput>

 

</telerik:RadDatePicker>

[Andrey]

Hi,

Which version you are using for your project? I was not able to replicate the issue neither in Mozilla nor in IE.

I made a screenshot to illustrate how things are looking on my side.

Regards,
Andrey
the Telerik team

[Jimmy]

Hi, 

Have similar problem with RadDatepicker when I put the control on my asp page the popupbutton appear far right from the edit box, this happens on IE or chrome.

Thanks

[Shinu]

Hi,

I was not able to replicate the issue. I am using the version 2013, 1, 130, 35. One suggestion is you can try to override the corresponding cssclass of the popup for IE and chrome.
CSS:

.rcCalPopup
{
  margin-left:4% !important;
}

Thanks,
Shinu.