raddatepicker,width does not change in ie8

22 posts, 1 answers
  1. sriharsha an
    sriharsha an avatar
    9 posts
    Member since:
    Mar 2010

    Posted 05 May 2010 Link to this post

    We are using datepicker .inspite of setting the width and even changing the width to different values in terms of pixels and percentage , the width remains
    unchanged .
    This problem occurs only in IE8 browser , where as in all other browser(FF,ie7 etc)  it works fine

    <td style="width: 35%">  
                                            <telerik:RadDatePicker ID="txtDoj" runat="server" Skin="Vista" MinDate="1900-01-01">  
                                                <Calendar runat="server" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False">  
                                                </Calendar> 
                                                <DatePopupButton HoverImageUrl="" ImageUrl="" /> 
                                            </telerik:RadDatePicker> 
                                        </td> 

    Could we know a solution for this problem

    Thanks and regards,
    sriharsha
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 10 May 2010 Link to this post

    Hello Sriharsha,

    Can you provide a full runnable web page? Here is my test page, which works as expected.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    .width100,
    .width100 table
    {
        width:100px !important;
    }
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <table border="1" cellspacing="0" style="width:100%"><tr>
    <td style="width:15%">
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Vista" Width="90%" />
    </td>
    <td style="width:35%">
        <telerik:RadDatePicker ID="RadDatePicker2" runat="server" Skin="Vista" CssClass="width100" />
    </td>
    <td style="width:50%">
        <telerik:RadDatePicker ID="RadDatePicker3" runat="server" Skin="Vista" Width="200px" />
    </td>
    </tr></table>
     
    </form>
    </body>
    </html>


    Kind regards,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David Harrison
    David Harrison avatar
    4 posts
    Member since:
    Apr 2006

    Posted 27 Jan 2011 Link to this post

    Actually.. in your provided example the third date picker width property (width="200px") does not work in IE8. It only works if you go into compatibility mode.
  5. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 28 Jan 2011 Link to this post

    Hi David,

    I am attaching a screenshot illustrating that the third picker has the correct width on IE8 on my end. Let me know what you think or if there is something I am missing.

    All the best,
    Pavel
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Tom
    Tom avatar
    17 posts
    Member since:
    Jan 2009

    Posted 28 Jan 2011 Link to this post

    I am experiencing the same issue: in IE8 the picker width goes to 100% of the container, but in IE7 (or IE8 Compatibility mode) the width is correct.

    On this project we are using an old version of ASP.NET AJAX: 2008 Q3, and I noticed that a 2009 release fixed "RadDateTimePicker incorrect rendering in a certain IE8 mode"... so I'm wondering what release the other posters on this thread were using.
  7. Emir Prcic
    Emir Prcic avatar
    19 posts
    Member since:
    Dec 2009

    Posted 30 Jun 2011 Link to this post

    Hy

    we are experiencing this issue as well, we are using the 2011 release of the controls

    We have a DateTimePicker in a cell, according with an Textbox right after it. The DatetimePicker is set to a fixed width.

    It is displaying correct in the Visual Editor of VS, as well as in Firefox and Internet Explorer in IE7-Mode. But changing the Mode in Internet Explorer to Version 8 or 9, the DateTimepicker grows to the full sitze of the cell, the Textbox is following in the next line.

    I attached screenshots showing the different renderings in Firefox and Internet Explorer (version 8 and 9)

    It seems to have something to do with the display attribute of the "Wrapper" Control, (the one creating the div-Section). By default it is setting the display-Attribute to "inline",  changing that Attribute to "inline-table" results in correct rendering.

    Also it only appears, when the IE is running in compatibility mode. Weird thing besides: When you open the IE-Developertools and change the browser Mode to a Non-Compatibility mode, the site renders as it should. Even if I switch back to IE9-Compatibility mode!!! However, if I close the browser and open the site again (some sites open in compatibility mode by default), the rendering is incorrect again.

    I´ve also tried with IE8. Altough the site opens there in compatibilty-mode by default, the site is rendered correct there. So it seems to be an issue with IE9-Compatibility-mode only.

    Mabe anyone has further suggestions to walkaround?

    Maybe Telerik can change this behaviour in the next release?
  8. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 04 Jul 2011 Link to this post

    Hi Emir,

    Could you provide the markup which produces this undesired behavior, since I am not able to replicate the problem on my end.

    All the best,
    Pavel
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  9. Lukus
    Lukus avatar
    13 posts
    Member since:
    Nov 2010

    Posted 18 Jul 2011 Link to this post

    I am having the same issue..

    When I have a raddatepicker plus some other control like a label or textbox all in the same <td> of a table the datepicker takes up the whole width of the column moving the other controls to a diff line when viewing it in IE9 compatibility mode.

    <td>
       <asp:TextBox ID="txt_Type" runat="server" Width="100px" />
       <asp:Label ID="lbl_Created" runat="server" Text="Created:" />
       <telerik:RadDatePicker ID="rdp_Created" runat="server" Enabled="false" Width="100px" />
    </td>

    results:

  10. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 19 Jul 2011 Link to this post

    Hello Lukus,

    I am not able to reproduce such a problem in IE9. Can you confirm that the provided markup is sufficient to replicate it and also please specify what version of the controls are you using.

    Kind regards,
    Pavel
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  11. Lukus
    Lukus avatar
    13 posts
    Member since:
    Nov 2010

    Posted 19 Jul 2011 Link to this post

    We are using v.2010.3.1109.40

    I am also getting this issue any time I try and set the width of the RadDatePicker less than the width of the table column that it is in.  The control basically ignores that I have set the width and spans the entire width.

    We are only getting this issue in IE9.  When our application is opened in IE8, everything seems to be fine.
  12. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 25 Jul 2011 Link to this post

    Hi Lukus,

    I still cannot reproduce the issue with the provided information. Please paste some of your markup which illustrates the issue. Also note that you are using a version of the controls which was compiled prior the release of IE9, thus it may not be fully compatible with it.

    Greetings,
    Pavel
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  13. Jorge
    Jorge avatar
    17 posts
    Member since:
    Oct 2008

    Posted 21 Mar 2012 Link to this post

    Same problem here with IE9. The datepicker extends to 100% of the width of the parent div, regardless of what value I set for the "width" parameter in the control.
    Seems to me like, the fact that you cannot reproduce this issue on your end should not mean there is no problem here. There are far too many of us who CAN reproduce this issue. Please escalate and resolve.
    Thanks.
  14. Martin
    Admin
    Martin avatar
    811 posts

    Posted 22 Mar 2012 Link to this post

    Hello Jorge,

    Since the issue still replicates on client's end, I can assure you that we will give our best to resolve it as soon as possible. To further escalate the issue we will need the following information:

    1. The version of RadControls you are using.
    2. The full browser version the issue replicates on.
    3. Sample runnable page or code that reproduces the problem. In case you have a valid support subscription you can open a formal support ticket and attach that information there.
    4. The exact steps that have to be performed, to observe the issue.

    Once we have the information above we will be able to debug the code locally and provide more to the point resolution or workaround.


    Greetings,
    Martin
    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.
  15. Jorge
    Jorge avatar
    17 posts
    Member since:
    Oct 2008

    Posted 22 Mar 2012 Link to this post

    We are running RadControls for ASP.NET Ajax, version 2011.3.1305.40. I am using IE 9.0.8112.16421.
    Currently I am the only one in the group with IE9, so I am the only one seing this issue. If I create a blank aspx page and drop the RadDatePicker in design view in VS 2010, the control looks just fine. But when IE renders the page, the RadDatePicker gets stretched to 100% of the parent element's width. The "Width" value in the control is completely ignored. If I apply a CSS style of "float:left" to the RadDatePicker, then it shrinks down to the correct width and appears to look ok, but then the float positioning messes up the layout for the other controls, so that is not a good solution. Another way I can make it behave is if I wrap it inside a div with a fixed width style, but this too seems like a hack, and I would prefer not to have to wrap every date picker inside a fixed width div.

    I think I narrowed the problem down to the "browser" mode in IE9, and it only affects the RadDatePicker, as far as I can tell.
    Currently we instruct IE to load our app in "IE8 - Compatibility View" via the following setting in web.config:
        <add name="X-UA-Compatible" value="IE=8" />
    
    This setting is necessary for out app to work in IE9, and has been working just fine for a while. The setting modifies the "document" mode, but not the "browser" mode in IE.
    When looking at a page with the stretched RadDatePicker, if I bring up the Developer Tools in IE9 (hit F12) and make any change to the browser mode, then the problem with the RadDatePicker gets fixed instantly. It does not matter what I change it to. Once the issue is corrected, I can switch back to the previous setting and it still looks just fine. That is until I close and re-open the browser.Then the RadDatePicker's width gets messed up again.

    I hope this helps you. Thanks.
  16. Martin
    Admin
    Martin avatar
    811 posts

    Posted 22 Mar 2012 Link to this post

    Hello Jorge,

    I am attaching a sample project based on the information you have provided. In addition you can find a browser screenshot after the project was ran. As you can see the picker renders just fine.

    In addition, since the issue replicates only on initial page load, could you please verify that the page loads without any errors? Please enable IE script error displaying and reload the page.

    Regards,
    Martin
    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.
  17. Christopher
    Christopher avatar
    3 posts
    Member since:
    Jul 2012

    Posted 24 Jul 2012 Link to this post

    Hi, 
    I have similar problems with the raddatepicker.
    When I've enabled auto postback controls are behaving weird. (the width jumps)

    This has been tested in IE9 with all the possible document modes  

    Can someone help me with this?

    Thx.

    test.aspx
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="Invoice_Custom_test" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="Telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
     
        <script language="javascript" type="text/javascript">
     
    function checkDateToSubmit(sender, args){
        if (sender.get_id() === "invoiceList_RadInvoiceDate"){ 
            if ($find("invoiceList_txtInvoiceDate").get_selectedDate() !==  null){
                document.forms[0].submit();
            }
        }else if (sender.get_id() === "invoiceList_RadDueDate"){
            if ($find("invoiceList_txtDueDate").get_selectedDate() !==  null){
                document.forms[0].submit();
            }
        }  
    }
            
    </script>
     
     
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="overflow:scroll;height:200px; position:relative;" >
             <telerik:RadScriptManager ID="ScriptManager" runat="server">
                <Services>
                    <asp:ServiceReference Path="Webservices/MyWebService.asmx" />
                </Services>
            </telerik:RadScriptManager>
               <asp:Table ID="tblHeader" runat="server" BorderWidth="0" HorizontalAlign="left" width="100%" CellPadding="3" CellSpacing="0"   >
                                                     
                                                        <asp:TableRow>
                                                            <asp:TableCell ColumnSpan="4" CssClass="invoiceHeaderTitle">                               
                                                                 TEST                             
                                                            </asp:TableCell>
                                                        </asp:TableRow>
                                                            
                                                        <asp:TableRow>
                                                            <asp:TableCell ColumnSpan="4" CssClass="invoiceHeaderTitle">                               
                                                             TEST 1 Without postback    <telerik:RadDatePicker ID="INVOICEDATEFROM"
                                            Width="90px"  runat="server" autopostback="false"  />
     
                                            <br />
                                 TEST 2 with postback           <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Culture="English (United States)"   Width="90px"  AutoPostBack="true" >        
                <DateInput DateFormat="dd/M/yyyy"
                </DateInput>
    </telerik:RadDatePicker>
                                                            </asp:TableCell>
                                                        </asp:TableRow>
                                                    </asp:Table>
     
     
       
        </div>
        </form>
    </body>
    </html>

    test.aspx.vb
    Imports Telerik.Web.UI
     
    Partial Class Invoice_Custom_test
        Inherits System.Web.UI.Page
     
        Protected Sub Invoice_Custom_test_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            BindGrid()
        End Sub
     
        Private Sub fillSigns(ByRef dropdown As RadComboBox, Optional ByVal withEmptyFirst As Boolean = False, Optional ByVal value As String = "", Optional ByVal text As String = "")
            If dropdown.Items.Count = 0 Then
                '' Dim compList As InvoiceCompanyList = Nothing
                If withEmptyFirst Then dropdown.Items.Add(New RadComboBoxItem("", ""))
     
                dropdown.Items.Add(New RadComboBoxItem("=", "="))
                dropdown.Items.Add(New RadComboBoxItem("<", "<"))
                dropdown.Items.Add(New RadComboBoxItem("<=", "<="))
                dropdown.Items.Add(New RadComboBoxItem(">", ">"))
                dropdown.Items.Add(New RadComboBoxItem(">=", ">="))
     
                Try
                    If text <> "" Then dropdown.FindItemByText(text).Selected = True
                    If value <> "" Then dropdown.FindItemByValue(value).Selected = True
                Catch ex As Exception
                End Try
            End If
        End Sub
        Public Sub BindGrid()
     
            Dim tr As New TableRow
            Dim tc As New TableCell
            Dim l As New Label
            l.Text = "TEST 3 from code with autopostback"
            tc.Controls.Add(l)
     
     
            Dim radComboRadDueDate As RadComboBox = New RadComboBox
            radComboRadDueDate.ID = "RadDueDate"
     
            radComboRadDueDate.ShowToggleImage = False
            radComboRadDueDate.EnableViewState = False
            radComboRadDueDate.Width = Unit.Pixel(22)
            radComboRadDueDate.DropDownWidth = Unit.Pixel(40)
            radComboRadDueDate.AllowCustomText = False
            radComboRadDueDate.MarkFirstMatch = True
            radComboRadDueDate.OnClientSelectedIndexChanged = "checkDateToSubmit"
            fillSigns(radComboRadDueDate, , )
            tc.Controls.Add(radComboRadDueDate)
     
            Dim nbsp As New Literal()
            nbsp.Text = " "
            tc.Controls.Add(nbsp)
     
            Dim RadDatePicker1 As New RadDatePicker()
     
            RadDatePicker1.DatePopupButton.ToolTip = "test"
            Dim tod As New RadCalendarDay
            tod.Repeatable = Telerik.Web.UI.Calendar.RecurringEvents.Today
     
     
            tod.ItemStyle.CssClass = "rcToday"
            RadDatePicker1.Calendar.SpecialDays.Add(tod)
     
     
            RadDatePicker1.DateInput.DateFormat = "dd-MM-yyyy"
            RadDatePicker1.AutoPostBack = True
            RadDatePicker1.ID = "txttest"
            RadDatePicker1.Width = Unit.Pixel(90)
     
     
            tc.Controls.Add(RadDatePicker1)
            tr.Cells.Add(tc)
            tblHeader.Rows.Add(tr)
     
        End Sub
     
    End Class

  18. Martin
    Admin
    Martin avatar
    811 posts

    Posted 26 Jul 2012 Link to this post

    Hello Christopher,

    I have tried to reproduce the issue on my side using the latest official version of RadControls (2012.2.724), but without success. Could please verify whether the problem can be observed with the latest version of the product?

    All the best,
    Martin
    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.
  19. Christopher
    Christopher avatar
    3 posts
    Member since:
    Jul 2012

    Posted 26 Jul 2012 Link to this post

    Hi Martin,

    Thx for the quick reply. 
    I am using version 2012.1.215.40, but I will try the get the latest version.

    I also attached an example of my problem. 

    Greetings,

    Christopher




  20. sriharsha an
    sriharsha an avatar
    9 posts
    Member since:
    Mar 2010

    Posted 26 Jul 2012 Link to this post

    Modify your Css as below:

    <style type="text/css">
      
      
      
    .width100,
      
    .width100 table
      
    {
      
        width:100px !important;
      
    }

     

    and in Body as
    <body>
      
    <form id="form1" runat="server">
      
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
      
      
      
    <table border="1" cellspacing="0" style="width:100%"><tr>
      
      
    <td style="width:35%">
      
        <telerik:RadDatePicker ID="RadDatePicker2" runat="server" Skin="Vista" CssClass="width100" />
      
    </td>

    Please observe that    > " CssClass="width100" " is used here.
    [i.e we need to used some thing like

    width:100px !important;


    This had solved my problem , hope it will for you as well.

    Cheers,
    Sriharsha

  21. Christopher
    Christopher avatar
    3 posts
    Member since:
    Jul 2012

    Posted 26 Jul 2012 Link to this post

    Hi Sriharsha,

    The css does not seem to do it for me.

    But I am glad to say that the latest version is working.

    I need to run some more test, but I have confidence that it will be ok.

    Thx for the help.


  22. Matt
    Matt avatar
    31 posts
    Member since:
    Jan 2008

    Posted 31 Jan 2013 Link to this post

    This probably is a little late, but I've also experienced this issue in IE 9.

    At any rate, what I did to solve the issue was put the datepicker in a table, with a width of 150px.

    That constrains the control from taking up the entire width of the page.

  23. Leon
    Leon avatar
    6 posts
    Member since:
    May 2014

    Posted 14 May 2014 Link to this post

    For anyone that might want the answer, I came across using the webdev tool built into IE11, which allows me to visualize the DOM
    I found that the Telerik component inherently  adds its own display inside the html code to display:inline, which will overide what you might want as display width...
    I added the following inside the html code for the compoent

    <telerik:RadDatePicker style="display:inherit" runat="server" ID="abcdec"........

    and works now by forcing an override of the override at the lowest level of the DOM....inherit will allow you to base it on the CSS defined therein...good luck all
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017