This is a migrated thread and some comments may be shown as answers.
Extra DIV surrounding datetimepicker control
0 Answers 16 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Bill
Top achievements
Rank 1
Bill asked on 08 Jan 2011, 09:40 PM
Hopefully someone can enhance this solution or provide an alternative one. I had to alter telerik.common.min.js to fix an issue where the outer DIV that sounds the calendar control was taking up additional space on my View. The HTML below gets added to the bottom of my View which increases the height. This is particularly a problem since my View is inside an iFrame.

This is the HTML generated before the change.
 <div style="width205pxheight195px" class="t-animation-container" jquery1294517176244="5">
        <div style="displaynone" class="t-widget t-calendar t-datepicker-calendar" jquery1294517176244="3">
            <div class="t-header">
                <a class="t-link t-nav-prev " href="#"><span class="t-icon t-arrow-prev"></span>
                </a><a class="t-link t-nav-fast" href="#">January 2011</a><a class="t-link t-nav-next "
                    href="#"><span class="t-icon t-arrow-next"></span></a></div>
            <table class="t-content" cellspacing="0">
                <thead>
                    <tr class="t-week-header">
                        <th title="Sunday" abbr="Sun" scope="col">S</th>
                        <th title="Monday" abbr="Mon" scope="col">M</th>................


Here is the HTML generated after the change
 <div style="width205pxheight195px" class="t-animation-container" jquery1294517176244="5">
        <div style="displaynone" class="t-widget t-calendar t-datepicker-calendar" jquery1294517176244="3">
            <div class="t-header">
                <a class="t-link t-nav-prev " href="#"><span class="t-icon t-arrow-prev"></span>
                </a><a class="t-link t-nav-fast" href="#">January 2011</a><a class="t-link t-nav-next "
                    href="#"><span class="t-icon t-arrow-next"></span></a></div>
            <table class="t-content" cellspacing="0">
                <thead>
                    <tr class="t-week-header">
                        <th title="Sunday" abbr="Sun" scope="col">S</th>
                        <th title="Monday" abbr="Mon" scope="col">M</th>.................


Here is the original code snippet from telerik.common.js.
  $.extend($t.fx, {
        _wrap: function (element) {
            if (!element.parent().hasClass('t-animation-container')) {
                element.wrap(
                             $('<div/>')
                             .addClass('t-animation-container')
                             .css({
                                 width: element.outerWidth(),
                                 height: element.outerHeight()



                             }));
            }
            return element.parent();
        },


Here is the updated code. I just removed the additional width and height css properties.
  $.extend($t.fx, {
        _wrap: function (element) {
            if (!element.parent().hasClass('t-animation-container')) {
                element.wrap(
                             $('<div/>')
                             .addClass('t-animation-container')
                             );
            }
            return element.parent();
        },



The problem with doing this is that it obviously changes the behavior of the control. Since the height and width of the outer DIV is
not fixed, the animation when changing months on the calendar is slightly choppy. It's not the end of the world
but wondering if there's a better CSS fix for this.




Believe it or not, all this because client-side validation doesn't seem to work through Telerik Windows
using partialViews. (no client validation for partialviews loaded on Telerik Windows => Use Views => use iframes)
he.he.he what a tangled web we weave.





Tags
Date/Time Pickers
Asked by
Bill
Top achievements
Rank 1
Share this question
or