RadTimePicker and a Modal Form

[Sean]

I have an applicaiton that opens an input form as a Modal form, using the ASPNET Ajax ModalPopupExtender.

On the form I have a RadTimePicker that opens beneath the modal.

I've tried what I know, including Overriding the CSS as I have done for Grids in the past.

Any ideas?

Thanks.

Sean

Electronic Arts, Orlando

[Sebastian]

Hi Sean ,

Have you tried changing the default z-index for the RadTimePicker to see whether this alleviates the glitch you observed? You may also use IE developer toolbar or FireBug to check whether bigger z-index is applied for the time view popup.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Sean]

Yes, I tried to override ther CSS in my own css file- not the css file from the install.

 

RadCalendarTimeView_Inox timeView .TimeViewStyle

 

{

 

z-index:1000000;

 

}

I looked at the style and it still had 4999 and 5001 for the two time pickers.

Sean

[Sebastian]

Hello Sean ,

If you would like to override the settings for a css style applied through an embedded RadTimePicker skin (Inox in your case), you will need to define a class with higher specificity as explained in this blog post on our site.

Additionally, please take into account that the Inox skin for all RadControls will be discontinued as of the Q1 2009 release:

http://www.telerik.com/products/aspnet-ajax/whats-new/release-history/q1-2009-version-number-2009-1-311.aspx

however you will still be able to use the skin as an external taking it from the /Skins subfolder of the installation folder of the suite and registering it as explained here:

http://www.telerik.com/help/aspnet-ajax/disabling_embedded_resources.html
http://www.telerik.com/help/aspnet-ajax/skinregistration.html

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Sean]

Overriding the CSS works, the value I send appears as desired. However, the wrapper object, a DIV, is set via JavaScript.

On line 132 of the RadCalendarCommonScript.js file, the z-index is set to 5000; When I use FireBug to test, I have to raise the index to 1000000 before it overcomes the modal form and RadCalendarPopup class.

Nothing I do to override the CSS works for this class. I am assuming that the Javascript loads last, so the CSS I use gets trumped by the javascript styling.

I should note that here is my markup:

<

telerik:RadTimePicker ID="txtStartTime" runat="server" Skin="Telerik" CssClass="timePicker" >

 

 

<TimeView StartTime="8:0:0" EndTime="22:31:00" Interval="0:30:0" Columns="5" TimeFormat="HH:mm">

 

 

</TimeView>

 

 

<DateInput DateFormat="HH:mm">

 

 

</DateInput>

 

 

</telerik:RadTimePicker>

 

When I look at the rendered HTML, I do not see any reference to the timePicker class. I even renamed the class to timePickerTest to alleviate any possible naming collision, but still nothing.

Thanks for the help.

Sean

[Sebastian]

Hi Sean ,

Unfortunately I am still not able to recreate the issue in my local tests.

Can you please check verify that you are using the latest Q3 2008 SP2 version (2008.3.1314) of our controls in your project or the latest major release Q1 2009 (2009.1.311)? If the issue remains, I will appreciate if you can provide a live url where the discrepancy can be observed. Thus we will be able to investigate the matter further and will do everything possible to provide up-to-the-point answer/solution.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.