RadDatePicker question

[JD]

Hello,

I am using RadDatePicker and having the width issue..no matter how much i fix it it always takes up the whole page space....http://www.telerik.com/community/forums/aspnet-ajax/input/raddatepicker-calendar-width.aspx..having a similar issue as is mentioned in this thread but in the end part someone said that it is solved in the next release I have the latest version of telerik

2011.2.712.35  but am still having this issue..It works fine in firefox,chrome but not in IE8...
Can someone please help me with this.

Thanks

[Iana Tsolova]

Hello Sp,

Can you share the problematic picker declaration, plus any custom styles you are apllying to it? Or the whole page code?

Regards,
Iana Tsolova
the Telerik team

[JD]

 

<%

 

@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

<%

 

@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%

 

@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"

 

Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%

 

@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%

 

@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%

 

@ Import Namespace="Microsoft.SharePoint" %>

<%

 

@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"

 

Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%

 

@ Control Language="C#" AutoEventWireup="true" CodeBehind="Test.ascx.cs"

 

Inherits="Test" %>

<%

 

@ Register assembly="Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<

 

 

asp:UpdatePanel ID="Panel1" runat="server">

 

<ContentTemplate>

 

<telerik:RadGrid ID="Grid1" runat="server">

 

<MasterTableView>

 

<Columns>

 

<telerik:GridTemplateColumn>

 

</telerik:GridTemplateColumn>

 

</Columns>

 

</MasterTableView>

 

</telerik:RadGrid>

 

<br />

 

 

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Width="150px"

 

Skin="WebBlue" >

<%

 

--<DateInput Width="150px">

</DateInput>

<Calendar Width="100px">

</Calendar>--

 

 

%>

 

<Calendar Skin="WebBlue" UseColumnHeadersAsSelectors="False"

 

UseRowHeadersAsSelectors="False" ViewSelectorText="x">

 

</Calendar>

 

<DateInput DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy">

 

</DateInput>

 

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

 

</telerik:RadDatePicker>

</ContentTemplate>
</UpdatePanel>


This is user control which loads in a web part.

Thanks

[Iana Tsolova]

Hello Sp,

Could you please confirm that you are using the latest version of the controls? I tested the same picker declaration in a simple web site but it works properly on my end. Is the issue replicable if you move the user control to a simple web site, outside SharePoint?

Kind regards,
Iana Tsolova
the Telerik team

[Christopher Blickley]

I'm having this issue as well.  I never had it before, it just started with the latest release 2011.2.915.  For me, it is happening when the RadDatePicker is in a table, like a data entry form. 

I've attached a screenshot.

In this screenshot it isn't such a big deal....on other areas of my application it really messed up the screen layout.

Any thoughts?

[JD]

I just used a Div tag to limit the width...Could not solve the issue otherwise..

[Christopher Blickley]

It appears to be limited to IE.  I'm using IE9 with the following compatability tag:

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

It works ok if I set it to IE=7, but that isn't a good solution for me since the site is built around IE=8.  I suppose I can try the <DIV> for now.

[Christopher Blickley]

Putting this in my global style sheet seems to work as well:

div.RadPicker table
{
    width: 150px !important;
}

[JD]

Yes this is a problem and that too with IE8..It works fine in other browsers..I was reading the forums and saw a similiar issue but that was with 2009 version of telerik and they said it would be solved in the next version..I have the latest version and it seems to be having this issue.

[Iana Tsolova]

Hi,

I am afraid we are not able to replicate the problem. Can you opean a formal support ticket or Bug report with a runnable sample illustrating the unexpected behavior and steps to use for repro?

Greetings,
Iana Tsolova
the Telerik team

[Christopher Blickley]

I'm opening a support ticket now with a sample.  I'll post a follow-up here if anything is found that can help others.  I was able to boil the problem down to the compatibility tag:

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

Thanks,
Chris

[Ralf]

Hi all,

same problem here. We are using the newset version (2011.3.1115.35).

I have fixed all width as follows:

_fromControl.Width = Unit.Pixel(97);
_fromControl.Style.Add("max-width", "97px !important");
_fromControl.DateInput.Width = Unit.Pixel(71);
_fromControl.DateInput.Style.Add("max-width", "71px !important");
_fromControl.DateInput.Style.Add("width", "71px !important");

The datetime picker is placed in a table cell. The table and it's cells are having no width given.
When I have loaded the page in IE9 with browser mode IE8/IE9 and document mode IE8/IE9, the controls 
will be rendered as expected. When I switch the browser mode to IE9 Compatibility View, the control 
will be rendered with greater width as set by the properties. And when the page is loaded, the control will be
resized to the given width.
In the IE dev tools I can see that the width is set to 100% for both the datetime picker and its date input.

What's the problem?

regards,
Ralf

[Iana Tsolova]

Hi Ralf,

Could you please try setting table-layout fixed for the table in which the pickers are located and see if this helps?

Greetings,
Iana Tsolova
the Telerik team

[Keith]

I have run into the same issue, and it was that I had a RadFormDecorator on the page. I use all RadInput controls, and then changed my DecoratedControls from All to being declared in the CodeBehind:

RadFormDecorator1.DecoratedControls = FormDecoratorDecoratedControls.H4H5H6 
                    | FormDecoratorDecoratedControls.Label 
                    | FormDecoratorDecoratedControls.Fieldset
                    | FormDecoratorDecoratedControls.Buttons
                    | FormDecoratorDecoratedControls.RadioButtons 
                    | FormDecoratorDecoratedControls.CheckBoxes;

(ignoring scrollbars, TextArea, TextBox, and Select, because I don't use those.)

Hope it helps.