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

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

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.

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

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:
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!

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

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

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

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

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

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

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.

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.

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