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

raddatepicker,width does not change in ie8

21 Answers 538 Views

Calendar

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

sriharsha an asked on 05 May 2010, 10:39 AM

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

21 Answers, 1 is accepted

Accepted

answered on 10 May 2010, 09:01 AM

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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<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.

answered on 28 Jan 2011, 08:20 AM

Screenshot.jpg

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.

answered on 30 Jun 2011, 09:58 AM

firefox.JPG

IE8orIE9.JPG

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?

answered on 22 Mar 2012, 10:28 AM

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:

The version of RadControls you are using.
The full browser version the issue replicates on.
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.
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.

answered on 22 Mar 2012, 02:43 PM

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.

answered on 22 Mar 2012, 06:13 PM

Sample.zip

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

answered on 24 Jul 2012, 12:46 PM

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">

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

<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

answered on 26 Jul 2012, 07:20 AM

Raddatepick.png

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

answered on 26 Jul 2012, 07:44 AM

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

answered on 26 Jul 2012, 08:35 AM

Version.png

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.