Replacing the buttons in the AdvancedFormTemplate

11 posts, 0 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 12 Oct 2010 Link to this post

    I'm working on modifying the Advanced Template and I need to put some extra buttons in the submit area. One of the buttons is actually a CustomControl based around an asp:Button so I can't use a LinkButton like the Advanced Form does.

    In addition, all of my pages are based on a MasterPage that has a FormDecorator on it so I figured I could replace the LinkButtons with regular Buttons and the FormDecorator would make sure that they all look alike. 

    Wrong.

    I'm just trying to mock up how the page should look and so, I have this as the code in my AdvancedForm,ascx's SubmitArea ...
    <asp:Panel runat="server"
               ID="ButtonsPanel"
               CssClass="rsAdvancedSubmitArea">
        <div class="rsAdvButtonWrapper">
            <asp:Button  ID="btnWorkgrouSecurity" runat="server" Text="Workgroup Security"/>
            <asp:Button  ID="UpdateButton" runat="server" Text='Save'/>
            <asp:Button  ID="CancelButton" runat="server" Text='Cancel' CommandName="Cancel" CausesValidation="false" />
        </div>
    </asp:Panel>

    SS1.jpg will show you the mess that is made of the layout of the buttons. I know that this is largely down to the styles defined as "rsAdvancedSubmitArea" and "rsAdvButtonWrapper". However removing anything in these classes that could, in any way, have an impact on the buttons gets be SS2.jpg. As you can see, the text alignment is shot and if you look at SS3.jpg you'll see that the highlighting of the buttons is wrong too; the right hand side of the button's gone.

    Can anyone shed any light on what I'm doing wrong here?

    -- 
    Stuart
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 12 Oct 2010 Link to this post

    Hello Stuart Hemming,

    Unfortunately I was not able to reproduce your problem. I just copied your code and pasted into my own project and this is the result:



    As I see you are going deeper in customizing the Advanced Form. Please find a sample project that I created as an example in the attached .zip file. It may be helpful when further questions appear.

    Kind regards,
    Veronica MIlcheva
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 12 Oct 2010 Link to this post

    Veronica, you are a star and my new favourite person at telerik towers.

    I've run the sample you sent me and am happy to say that it ran as you suggested it would.

    But... (you knew this was coming, didn't you?)

    OK. Add a RadFormDecorator to the page and set the skin to match the Scheduler and run it again.

    SS1.jpg is what I see.

    -- 
    Stuart
  5. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 13 Oct 2010 Link to this post

    Hello Stuart,

    Thank you for the good words. I'll be glad if I know as much as you one day :)

    I've missed the RadFormDecorator while reading your first post. After adding it to the page I reproduced the issue.

    The problem was in that when adding the FormDecorator, rsAdvancedSubmitArea overwrites the css settings of the RadFormDecorator. That's why we needed to make the Decorator settings with higher priority by using !important for each line. Here's a part of the CSS code:

    .rfdButton a.rfdSkinnedButton, .rfdButton a.rfdSkinnedButton *
            {
                cursor: default !important;
                background-repeat: no-repeat !important;
                background-color: transparent !important;
                height: 22px !important;
                line-height: 22px !important;
                text-decoration: none !important;
                display: inline-block !important;
                border: 0 !important; /* do not remove the !important flag, otherwise the * selector will not apply for that property */
                text-align: center !important;
                font: normal 12px "Segoe UI" , Arial, Helvetica !important;
                white-space: nowrap !important;
                width: auto !important;
                background-position: right 0 !important;
                background-image: url(http://aspnet-skins.telerikstatic.com/ajaxz/2010.2.929/Forest/FormDecorator/ButtonSprites.png) !important;
            }
              
            /* set dotted border to a focused button */
              
              
            .rfdButton a.rfdSkinnedButton, .rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover
            {
                padding: 0 4px 0 0 !important;
            }
              
            .rfdButton input[type="button"].rfdDecorated, .rfdButton input[type="reset"].rfdDecorated, .rfdButton input[type="submit"].rfdDecorated, .rfdButton .rfdSkinnedButton button, .rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover *
            {
                background-position: left -22px !important;
                text-align: center !important;
                height: 22px !important;
                line-height: 22px !important;
                border: 0 !important;
                padding-left: 12px !important;
                margin-right: 0 !important; /*Safari!*/
                background-image: url(http://aspnet-skins.telerikstatic.com/ajaxz/2010.2.929/Forest/FormDecorator/ButtonSprites.png) !important;
            }

    I know that this is not the best solution but at this moment it is the only way we could found.

    I've attached the full edited code in a .zip file.

    Hope this helps.

    Best Regards,
    Veronica Milcheva
    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
  6. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 13 Oct 2010 Link to this post

    Veronica,

    you are right that this is far from being the ideal solution. Especially when you consider that users of this particular system can change the skin they are using at will, which means I'm going to have to add all of these overridden classes programmatically after having determined the skin currently in use.

    What's more, 'cos there are, potentially, any number of custom skins I'm going to have to do even more work! :-(

    However, I thank you for the help and the revised code as at least I won't have to work out all of that for myself.

    -- 
    Stuart
  7. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 14 Oct 2010 Link to this post

    Hi Stuart Hemming,

    The actual problem comes from this CSS selector: rsAdvancedSubmitArea a.
    It styles all anchor elements contained in rsAdvancedSubmitArea.

    As we are using an anchor element that wraps the input for RadFormDecorator buttons in order to have rounded corners, it appears that all buttons contained in rsAdvancedSubmitArea will be broken because of the CSS selector that applies styles to all anchor elements. In your case, that styles the RadForm buttons with different width, padding, margins and most important – different sprite image.

    A possible solution would be to use different CSS selector, for example:
    rsAdvancedSubmitArea a.CustomLink and then use the class name for the links that you want to style this way.

    <a href=”#” class=”CustomLink”>Custom Link</a>.

    If that solution is acceptable for you, then it will not be necessary to override all the CSS rules with the !important rule as it was suggested in my previous post.

    Kind regards,
    Veronica Milcheva
    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
  8. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 14 Oct 2010 Link to this post

    Veronica,

    Thanks for that, I think I've understood what you're saying.

    I'm going to try adopting a slightly different approach to save me having to mess with the skin's selectors.

    What I'm going to do is replace references to the class rsAdvancedSubmitArea with, say, MyAdvancedAreaSubmit, then, on my page I'll recreate all of the selectors that are in the skin file that use rsAdvancedSubmitArea except the rsAdvancedSubmitArea a one. Any <a> tags I might want to put on my form will not be in that bit of the form anyhow.

    I'll let you know how it does.

    -- 
    Stuart
  9. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 14 Oct 2010 Link to this post


    I'll be glad if that helps.

    Yes, please let me know how it goes.

    Regards,
    Veronica Milcheva
    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
  10. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 15 Oct 2010 Link to this post

    Veronica,

    If you have a look at support ticket 357665 (which as been logged against a different issue) you'll find a copy of a project in which I've implemented that which we've been discussing here.

    If you run the project you'll see that the text in he buttons still alights to the right rather than the centre and that the hover functionality is, well, patchy.

    If you have any insight as to why this might be, I'd be delighted to hear it.

    -- 
    Stuart
  11. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 22 Oct 2010 Link to this post

    Hi Stuart Hemming,

    The reason was that RadFormDecorator puts padding-left:12px; to the buttons:

    .rfdButton input.rfdDecorated[type="button"], .rfdButton input.rfdDecorated[type="reset"], .rfdButton input.rfdDecorated[type="submit"], .rfdButton .rfdSkinnedButton button, .rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover * {
    background-position:left -22px;
    border:0 none;
    height:22px;
    line-height:22px;
    margin-right:0;
    padding-left:12px;
    }

    You'll need to appply padding-right: 8px and the text of the buttons will be centered :

    .rfdButton input.rfdDecorated[type="button"],
            .rfdButton input.rfdDecorated[type="reset"], 
            .rfdButton input.rfdDecorated[type="submit"], 
            .rfdButton .rfdSkinnedButton button, 
            .rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover *
            {
                padding-right: 8px !important;
            }

    Please let me know if this was helpful.

    All the best,
    Veronica Milcheva
    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
  12. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 22 Oct 2010 Link to this post

    Veronica,

    Hi Stuart Hemming,
    Please, Stuart is fine.

    The reason was that RadFormDecorator puts padding-left:12px; to the buttons:
    > ...
    Please let me know if this was helpful
    There's no doubt, you're good.

    Thanks a lot.

    -- 
    Stuart
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017