Expand calendar width

[Jeff]

Hello,

Putting a calendar control in a center pane with vertical & horizontal splitters:

I would like to understand if the calendar control can be forced to expand horzontally (taking up 100% of width at all times) as the vertical splitter bar expands. It appears the calendar does grow vertically as the horizontal splitter bar expands.

Thanks!

[Jeff]

Still no reply...

Anyway, I have discoverd that this is only the case when a theme is applied. In my case Web20. If I remove the theme then the calendar will expand/contract with the splitter.

So my question...if anyone is listening...is how do I get this same expand/contract with the theme enabled.

thanks?

[Dimo]

Hi Jeff,

RadCalendar's Web20 skin is optimized for a fixed-width operation, however, you can make the control expand automatically by adding the following CSS rule to your application:

.calendarWrapper_Web20,
.TableLayout_Web20
{
    width: 100% ;
}


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff]

I am not too familiar yet with all the nuances of css and when I applied your provided script (as is) to my css skinning page within dnn it had no effect.

I then followed instruction to customize existing skins - set EnableEmbeddedSkins to False, copied the calendar css to my App_Themes dir, set the Skin to Web20, set the Image dir to the copied Calendar images in App_Themes/Web20 - and for some reason beyond me, the calendar now resizes horizontally???

I hope I figure this out better and soon because that was like vodoo magic as far as I am concerned.

Why if I simply copy the existing Web20 skin css for the calendar and set EnableEmbeddedSkins does the calendar now resize??? And what can I take away from this so that I can work more effectivley in the future?

It would seem there are conflicting css items stepping on each other somehow, although given this is the only telerik app in my site and given I would suspect telerik named their css classes in such a way as to avoid name collisions...what could possibly be happing?

Sorry for the rather open-endded questions but I am tring to make a solid informed decision before I recommend (or not)  telerik to my company. Thanks!

[Dimo]

Hi Jeff,

Indeed, our CSS classes are named in such a way, that name collisions are very unlikely. However, CSS style collisions are possible if a person uses global styles with high specificity in his application (for example - set margins/paddings/width/height to all tables or all table cells, etc)

You can try the following CSS rule instead:

.calendarWrapper_Web20,
.TableLayout_Web20
{
    width: 100%  !important ;
}

If this works, then there is some style collision on the page.

In your particular case, it is hard to guess what could be causing the unexpected behavior. If you would care to send us a live URL or a sample web page for us to investigate, I will tell you what exactly is happening.



Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff]

OK so in order to make your job and my job easier, I am using the provided telerik Helpdesk demo. Here is what I notice within the demo;

RadCalendar:
I set the EnableEmbeddedSkins = False & Skin = Web20.

(Note that with this demo app the Web20.Skin is registering all the controls and in the Default.aspx Page registration there is a Theme='Web20'.)

With the above changes the calendar will successfully resize horizontally.

So again, my question - Why by simply changing from the Embedded Web20 theme to the App_Themes/Web20 theme does the calendar resize horizontally?

Note that regarding the 'App_Themes/Web20.css': on one try I made no change to the .css and on another try I copied the entire contents of the 'C:\Program Files\Telerik\RadControls for ASPNET AJAX Q2 2008\Skins\Web20\Calendar.Web20.css' and neither caused the calendar to revert back to a fixed width.

[Dimo]

Hi Jeff,

Actually, I forgot to mention one thing here. The RadCalendar Web20 skin has been changed to allow automatic expanding for Q2 2008. It seems that you are using Q1 or older version. If you upgrade to Q2, the Web20 Calendar will expand automatically when Width="100%" is set.

As far as I can see, the HelpDesk demo application does not use the latest version of RadControls.

Here is a simple example, which works as expected with RadControls for ASP.NET AJAX Q2 2008 and embedded skins:


<table style="width:100%"><tr><td>
   <telerik:RadCalendar ID="RadCalendar1" runat="server" Skin="Web20" Width="100%" />
</td></tr></table>

<table style="width:100%"><tr><td>
   <telerik:RadCalendar ID="RadCalendar2" runat="server" Skin="Default" Width="100%" />
</td></tr></table>


What's more, now I made a couple of small changes in the Web20 skin, which will make the control look better when expanded. Changes will take effect in the coming Service Pack 1.

By the way, the embedded skins and the CSS files provided in the /Skins/ folder for a given RadControls installation are the same, so there shouldn't be any difference in the look or behavior when using either of them.


Let us know if you need further advice.



Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff]

Hello Dimo,

I used the latest dll (I was using the dll's that came with the demo) and now the calendar does resize with the embedded skin.

Regarding the other visual changes you refer to having fixed in sp1 - please refer to the following post:  http://www.telerik.com/community/forums/thread/b311D-bkggeg.aspx where I point to some visual problems I have discovered with the day style when you hover over the day.

Also Dimo, if you could please refer the following post to someone in your dnn support group:  http://www.telerik.com/community/forums/thread/b311D-bkgtae.aspx This is a most perplexing issue and I did check after changing to the latest dll's and the issue still remains.

Also one final question on forum protocol - If I mark this thread as solved...which it is...can I expect for you to see the above comments or should I wait to hear from you one more time before marking as solved.

Thanks !

[Dimo]

Hi Jeff,

Yes, your other questions will be addressed in the relevant forum threads, so you can marked this one as answered.

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Fit2Page]

When you are in a Bootstrap environment, just add cssclass="col-12". That will do the trick.

 

Marc