RadDatePicker positioning is different between IE and Mozilla

6 posts, 0 answers
  1. Marc
    Marc avatar
    17 posts
    Member since:
    May 2009

    Posted 26 Aug 2009 Link to this post

    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>
    ########################################################################################
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Aug 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. OMAIR
    OMAIR avatar
    2 posts
    Member since:
    Oct 2012

    Posted 06 Nov 2012 Link to this post

    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>

  5. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 09 Nov 2012 Link to this post

    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
    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.
  6. Jimmy
    Jimmy avatar
    3 posts
    Member since:
    Aug 2011

    Posted 13 Jun 2013 Link to this post

    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
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Jun 2013 Link to this post

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