How to modify Popup Caption Style (font, height) from Radgrid in EditMode=Popup

7 posts, 1 answers
  1. Marcelo
    Marcelo avatar
    3 posts
    Member since:
    Jul 2015

    Posted 28 Jul 2015 Link to this post

    Hi,

     I have a radgrid with EditMode​ = "Popup" and EditType = "WebUserControl"

     I can set some parameters of the PopUp using javascript: 

    var popUp;
     
    function ShowPopUp(sender, args) {
     
        popUp = args.get_popUp();
     
        popUp.style.height = "auto";
        popUp.style.width = "680px";
        popUp.style.left = ((window.innerWidth - 680) / 2).toString() + "px";
        popUp.style.top = ((window.innerHeight - 515) / 2).toString() + "px";
     
    }

    But how can I modify the settings from the caption of the popup?

    Settings like: 

    Height

    FontSize

    FontColor

    BackColor

     

    Thank you so much for attention! And sorry for my bad english!

     

     

  2.
  3. Answer
    Eyup
    Admin
    Eyup avatar
    4071 posts

    Posted 31 Jul 2015 Link to this post

    Hello Marcelo,

    You can achieve this requirement using CSS:
    <style>
        div.RadGrid div.rgEditForm div.rgHeader {
            height: 40px !important;
            font-size: large;
            color: white;
            background-color: lightblue;
            background-image: none;
        }
    </style>

    Hope this helps. Please give it a try and let me know about the result.

    Regards,
    Eyup
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  5. Marcelo
    Marcelo avatar
    3 posts
    Member since:
    Jul 2015

    Posted 31 Jul 2015 Link to this post

    Hello, Eyup.

    Thank's for the answer!

    This works fine!! Just the vertical align doesn't works and I don't know why.

    After your help my code looks like:

    <style type="text/css">
     
    div.RadGrid div.rgEditForm div.rgHeader {
     
    height: 45px !important;
     
    font-size: medium;
     
    color: white;
     
    background-color: rgb(49,147,192);
     
    background-image: none;
     
    vertical-align: middle;   // This doesn't works
    }
     
     
    div.RadGrid div.rgEditForm {
     
        border-color: rgb(75,75,75);
    }
    </style>
     

    Regards,

    Marcelo

     

     

  7. Eyup
    Admin
    Eyup avatar
    4071 posts

    Posted 05 Aug 2015 Link to this post

    Hello Marcelo,

    You can achieve that by adding the following line to the mentioned rule:
    line-height: 33px;

    That should do the trick. Looking forward to your reply.

    In addition you can check various resources over the net about centering div content vertically:
    http://www.vanseodesign.com/css/vertical-centering/

    Regards,
    Eyup
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  9. Marcelo
    Marcelo avatar
    3 posts
    Member since:
    Jul 2015

    Posted 05 Aug 2015 in reply to Eyup Link to this post

    Hello Eyup.

    I did it with the command above:

     

    padding-top: 10px;
     

    Thank's again!!!

    You can close this thread.

  11. Hhj
    Hhj avatar
    1 posts
    Member since:
    Nov 2012

    Posted 11 Jul 2016 in reply to Marcelo Link to this post

    How to modify Popup Caption alignment in code behind
  13. Eyup
    Admin
    Eyup avatar
    4071 posts

    Posted 14 Jul 2016 Link to this post

    Hi,

    You can use the CSS rule below to achieve this requirement:
    <EditFormSettings CaptionFormatString="Modify a Record">
    </EditFormSettings>
    CSS:
    div.RadGrid .rgEditForm .rgHeader > div:first-child {
        margin-left: 60%;
    }

    I hope this will prove helpful.

    Regards,
    Eyup
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top