This is a migrated thread and some comments may be shown as answers.

Rendering of Buttons in Beta of Q2

29 Answers 246 Views

FormDecorator

This is a migrated thread and some comments may be shown as answers.

29 Answers, 1 is accepted

Accepted

answered on 09 Jul 2009, 08:26 AM

Hello Sylvain,

There is already an option to revert to the old looks of RadControls, as it has been announced a couple of months ago:

http://blogs.telerik.com/tervelpeykov/posts/09-03-20/using_pre-q1_2009_skins_with_q1_2009.aspx

http://blogs.telerik.com/tervelpeykov/posts/09-02-23/radcontrols_for_asp_net_ajax_receive_a_major_face-lift.aspx

However, in the case with FormDecorator it is a bit complicated, because the skin converter converts pre-q1 skins, but we have introduced a new, even faster skinning mechanism in Q2. What I mean is that the skin converter (http://converter.telerik.com/skinconverter/) has to be updated to the new rendering as well.

However, we do not plan to include the old skins (up to Q3.2008) in the distribution of RadControls.

Greetings,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 29 Oct 2009, 08:19 PM

Hi Dimo & Martin,

Hope you are well.

I'm still having some issues with this and in a related thread am having problems with an image in a button. Please could you supply me with a cross CSS example that will make the following two examples have 0 padding to the left and right of the button content?

    
            <asp:Button ID="serverButton" runat="server" Text="Button Text" /> 
        
            <button id="imageButton" ><img src="../Images/Icons/disk-16.gif" /> Save</button>

The first line shows my existing button and in that the padding to the left and right varies depending on how wide the text content is (CSS shown below). The second line is my image button that I'm implementing (with some javascript for the AJAX calls). On the second example I end up with extra padding in front of the image for some reason.

As requested it would be very helpful to be given corrected CSS that would remove ALL left and right padding from the button with information on how to add fixed padding to the buttons (ie 5 px left and right irrespective of the text length).

    
                    *+html .rfdDecorated[type="button"],  
        
                    *+html .rfdDecorated[type="submit"],  
        
                    *+html .rfdDecorated[type="reset"],  
        
                    *+html .rfdDecorated  
        
                    {    
        
                        padding-left: 4px !important;    
        
                    }   
        
                    button img  
        
                    {  
        
                        height: 16px ! important;  
        
                        width: 16px;  
        
                        line-height: 16px;  
        
                        vertical-align:middle;  
        
                        padding-left: 0px !important;   
        
                        margin-left: 0px !important;   
        
                    }

Many thanks for you help, Once I've got the solution I'll post the info on how I get the Image Button working to help save others the development time on it if they do a similar thing.

Regards,

Jon

PS I've just done another test with the following two buttons and the left and right padding is even more pronounced. Interestingly teh second button has noticably less padding even though the only difference is that it has one character removed and a space in the middle...

    
            <button id="Button3">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</button><br/>  
        
            <button id="Button4">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAA</button><br/>

answered on 30 Oct 2009, 02:23 PM

I've found out the the increasing padding is caused by IE6 & IE7. As a button has more text some idiot at MS thought it would be a good idea to carry on adding padding to the left and right of the button... However some more searching and there is a work around for anyone that is interested. set the width to auto and the overflow to visible for the button style. I haven't tested much and it's upto telerik to include a fix in the skins if they want

Here is my new CSS (some maybe unncessary).

Cheers,

Jon

    
            button img  
        
                    {  
        
                        height: 16px ! important;  
        
                        width: 16px;  
        
                        line-height: 16px;  
        
                        vertical-align:middle;  
        
                    }  
        
                    .rfdButton input.rfdDecorated[type="button"],   
        
                    .rfdButton input[type="reset"],   
        
                    .rfdButton input.rfdDecorated[type="submit"],   
        
                    .rfdButton button,   
        
                    .rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover * {  
        
                        padding-left:10px !important;   
        
                        padding-right:6px ! important;  
        
                        width:auto;   
        
                        overflow:visible;  
        
                    }  
        
                    button    
        
                    {  
        
                        width:auto;   
        
                        overflow:visible;  
        
                    }

answered on 03 Nov 2009, 08:51 AM

Hi Martin,

No problem - I suspect that it won't be bulletproof but should certainly help some people.

With respect to the images used on the buttons the main problem that I am finding is that the 16px height that you need to use just isn't enough. Unless working with custom designed icons the commercial sets just don't have enough detail at 16px. As such what would be useful is some way to increase the button height to 24px or even for some people 32px. I've seen some comments on other posts regarding this and the problems that are around it but haven't had the time to investigate further.

Regards,

Jon

answered on 05 Nov 2009, 07:19 AM

Hi Jon,

The decoration of the controls by RadFormDecorator is done entirely on the client, and as you know we make heavy use of the real controls, for example - in the case with the decorated buttons we simply wrap the button in a link tag, and apply images both to the link and to the button itself. In HTML the input elements have fixed default dimensions - in the case with buttons it is 21 pixels. In order to avoid page jumps during skinning i have hardcoded these values, and at present buttons are expandable only in width. Adding support for different heights will require more elements created on the client and this will slow down the decoration, and this is unacceptable for us, and that's why such support is not planned.

However, if you need a custom skin with higher buttons, you can simply set the basestylesheet and the skin of the control as external resources and modify the image sprite, as well as the background-position and height / line-height of the buttons according to your required design. I recommend that you use IE Dev Toolbar of FireBug in order to inspect the generated code on the client and understand the CSS classes used for decoration.

Greetings,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.