DateTimePicker buttons padding

5 posts, 0 answers
  1. Andy F.
    Andy F. avatar
    46 posts
    Member since:
    May 2006

    Posted 17 Dec 2007 Link to this post

    How can I control the spacing between and around the buttons on the DateTimePicker?  Right now, it's too wide and might cause confusion with the user.  I want to bring the calendar and clock images closer to the text box and closer to each other.

    Thanks!
  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 20 Dec 2007 Link to this post

    Hello Andy F.,

    Thank you for contacting us. Yes, you will be able to control the distance by changing the padding on the .radPopupImage_[skin name] class - more information about the skins can be found here. We hope this information is helpful.

    Do not hesitate to write back if you have more questions.

    Sincerely yours,
    Vladimir Milev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Andy F.
    Andy F. avatar
    46 posts
    Member since:
    May 2006

    Posted 20 Dec 2007 Link to this post

    Turns out that I didn't describe the true nature of the problem well enough.

    I have a DateTimePicker in my main form and it looks perfect (I added this just to test).

    The problem is coming when I embed the DateTimePicker into the EditForm template of a RadGrid.  In the RadGrid, it shows up as a different height DateInput box and the spread on the icons is about double. 

    I checked on both FF and IE and both showed the same difference, so I'm guessing that the css for the icons is getting something bled over from the padding in the grid itself.

    The skin on the grid is Outlook 2007.  I'm using the Prometheus Calendar for the DateTimePicker and the skin is Default2006.  This is how I'm declaring the DateTimePicker:

    <telerik:RadDateTimePicker ID="dpETA" runat="server" MinDate="2008-01-01" Width="180px" Calendar-Skin="Default2006" Calendar-BorderStyle="solid" Calendar-BorderColor="black" Calendar-RangeMinDate="2008-01-01" >
    <TimeView ID="TimeView1" Interval="0:30:0" runat="server" StartTime="7:0:0" EndTime="18:15:0" HeaderText="Select Time or Enter Manually"></TimeView>
    </telerik:RadDateTimePicker>

    Any suggestions?
  4. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 21 Dec 2007 Link to this post

    Hello Andy F.,

    I am attaching a sample web page I have created for you. The problem you describe is real and is caused by a conflict between the RadGrid and RadCalendar/Input skins. I have made some changes to your code and also have overridden the behavior of the skins with CSS so that the extra padding is removed.

    Please, review my changes and let me know if that works for you.

    Kind regards,
    Vladimir Milev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Andy F.
    Andy F. avatar
    46 posts
    Member since:
    May 2006

    Posted 21 Dec 2007 Link to this post

    The problem, by the way, doesn't appear when using the new Prometheus Grid instead of the RadControl Grid.  I will implement your fix and post-back if anything else appears out of whack.  THANKS!
Back to Top