Popup Edit Form styling

6 posts, 1 answers
  1. Kevin Price
    Kevin Price avatar
    49 posts
    Member since:
    Sep 2012

    Posted 24 Jun 2010 Link to this post

    I have created a skin called "purple_grid" - basically, it is the default skin with a few purple images thrown in. I've gotten everything working except:
    .RadGrid_purple_grid .rgEditForm .rgHeader
            {
                   background-image:url('Grid/gradient_35.png');
            }

    I'm trying to have the edit form popup have the same header style as the command cell DIV.RadGrid_purple_grid .rgCommandCell {

        BACKGROUND-IMAGE: url('Grid/gradient_35.png');
        color: #ffffff !important;   

    }

    and have tried prefixing with DIV/TD/TR to no avail. Suggestions?



  2. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 25 Jun 2010 Link to this post

    Hello Kevin,

    You have not specified background-position style for the popup edit form header, which means that it inherits the RadGrid headers' background position. If you use a sprite image for the main headers, then probably the gradient_35.png image is applied, but not seen, as it is being offset upwards or downwards.

    If you still need assistance, please send us your RadGrid custom skin.

    Kind regards,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Kevin Price
    Kevin Price avatar
    49 posts
    Member since:
    Sep 2012

    Posted 25 Jun 2010 Link to this post

    Interesting that the sprite file created (using the Visual Style Tool) does not contain the gradient png I uploaded to use. The css for all the other elements points directly to the filename and not a location in the sprite. Are you saying the only way to change the caption/title bar for a pop-up form is through the sprite file?
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 28 Jun 2010 Link to this post

    Hi Kevin,

    I am not sure I understand what you say, but here are some additional remarks.

    >> Interesting that the sprite file created (using the Visual Style Tool) does not contain the gradient png I uploaded to use.

    The Visual Style Builder does not modify sprite images by adding or removing parts from them.

    >> The css for all the other elements points directly to the filename and not a location in the sprite.

    In some cases the background image styles pointing to the image, and the background position styles specifying the location of the image part in the sprite, are in separate CSS rules. This is done for optimization purposes.

    >> Are you saying the only way to change the caption/title bar for a pop-up form is through the sprite file?

    No. I meant to say that you should specify explicit background position to the popup edit form header, not just a background image style:

    .RadGrid_purple_grid .rgEditForm .rgHeader
    {
          background-image: url('Grid/gradient_35.png') ;
          background-position: 0 0 ;
    }


    All the best,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. aykut
    aykut avatar
    67 posts
    Member since:
    Oct 2007

    Posted 21 Aug in reply to Dimo Link to this post

    This is old post but subject is relevant.

    What I I have another radgrid inside edit popup form ? setting rgHeader style changes things for both grid.
  6. Peter Milchev
    Admin
    Peter Milchev avatar
    616 posts

    Posted 26 Aug Link to this post

    Hello Aykut,

    You can use use a more specific CSS selector, for example if the .rgHeader is a direct child of .rgEditForm: 

    .RadGrid_purple_grid .rgEditForm > .rgHeader {
        background-image: url('Grid/gradient_35.png');
        background-position: 0 0;
    }

    Here is a list of the more specific style selectors with an explanation:

    For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

    Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

    Regards,
    Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top