Override RadCalendarPopup CSS

5 posts, 0 answers
  1. Keith
    Keith avatar
    94 posts
    Member since:
    Jun 2012

    Posted 04 Jun 2013 Link to this post

    I developed a web application that uses RadWindows to display many forms, but because of client resolution problems and the required size of the RadWindow, I needed to create optional pages for some of them. This leads me to my problem.

    When the page is viewed in a RadWindow, I have a RadTimePicker that I have overridden the location using the RadCalendarPopup class.

    .RadCalendarPopup {  
        left: 50%
        margin-left: -32px
        position: absolute;  
        top: 0px;  
    }

    Now, the page will be rendered in a browser window on some occasions, therefore, I need to adjust the top location only when the page is viewed in a browser because a navigation menu is included in the top 50px. Thus, I need to change top to 50px;

    One solution I have considered is to have two separate CSS files and simply load them as needed in the code-behind, but it seems overkill to duplicate alot of CSS code just for one rule.

    I would use javascript client-side, but I have found that getting the correct wrapper div is quite unreliable.

    I will entertain any suggestions.


  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 07 Jun 2013 Link to this post

    Hello Keith,

    Thank you for writing.

    You can set the desired position of the popup by using the internal function showPopup:

    JavaScript:
    var picker = $find("<%= RadDatePicker1.ClientID %>");
    picker.showPopup(x, y);

    where x and y are integers.

    Please refer to these help topics: Client-Side Basics and RadDatePicker Client Object where you can find very detailed information on the RadDataPicker client-side API.

    I hope this helps.

    Regards,
    Venelin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keith
    Keith avatar
    94 posts
    Member since:
    Jun 2012

    Posted 10 Jun 2013 Link to this post

    Is javascript the only solution?
  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 13 Jun 2013 Link to this post

    Hello Keith,

    The JavaScript allows to set dynamically the coordinates of the popup depending on the position of the menu. However, you can set them only with CSS by using !important:

    .RadCalendarPopup
        left: 50% !important;
        margin-left: -32px !important;
        top: 0px !important;
    }

    I hope this helps.

    Regards,
    Galin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Keith
    Keith avatar
    94 posts
    Member since:
    Jun 2012

    Posted 13 Jun 2013 Link to this post

    I'm familiar with the !important notation. I have to employ it regularly to override much of the default Telerik settings, particularly regarding width and height of controls.

    I was hoping there would be some kind of magic that would allow me to set the CSS directly in the codebehind, because that is really the best place for it.
    I guess I can add the !important css to a different file and add it to the page as the last item in the composite css file. That should resolve the situation.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017