Replacing the buttons in the AdvancedFormTemplate

[Stuart Hemming]

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

[Veronica]

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

[Stuart Hemming]

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

[Veronica]

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

[Stuart Hemming]

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

[Veronica]

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

[Stuart Hemming]

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

[Veronica]

I'll be glad if that helps.

Yes, please let me know how it goes.

Regards,
Veronica Milcheva
the Telerik team

[Stuart Hemming]

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

[Veronica]

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

[Stuart Hemming]

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