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

Rendering of Buttons in Beta of Q2

29 Answers 216 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 03 Jul 2009, 04:15 PM
Hi,

It didn't take long to find an issue on this one and it's even visible on your demo site.  Have a look at the buttons on the form decorator.

The button text is decidedly off centre - there seems to be an extra gap to the left of the text.  On wider buttons with more space on either side of the text the effect is more pronounced!

Regards,

Jon 

29 Answers, 1 is accepted

Sort by
0
Georgi Tunev
Telerik team
answered on 06 Jul 2009, 12:39 PM
Hello Jon,

We are familiar with this problem and we are working on it. We will do our best to have the problem fixed for the next update of the control.


Regards,
Georgi Tunev
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.
0
Jon
Top achievements
Rank 1
answered on 06 Jul 2009, 12:49 PM
Hi Georgi,

Good news.  Is that an update that will be before it goes live this week or will that be a later SP?  It seemed to happen on the Q1 527 update as well.

Regards,

Jon
0
Sylvain
Top achievements
Rank 1
answered on 06 Jul 2009, 08:45 PM
Apparently, it was not fixed for Q2 2009 :(
I'm hoping it will be fixed quickly as it doesn't look good.
0
Newton
Top achievements
Rank 2
answered on 07 Jul 2009, 03:21 AM
Hello,

Is there a fix or a wokaround to solve this problem in Q2 2009 release?

A decorated button with 20px width and the text "OK" I can see only the letter "O" :(

Regards,
Newton
0
Accepted
Martin
Telerik team
answered on 07 Jul 2009, 04:49 AM
Hello Newton,

Width of 20 pixels is not enough because of the rounded corners in the rendering of the skinned buttons (there is left and right padding of 4 pixels). However, with the following workaround I managed to set a optimal size of the buttons, so the "OK" is not cut:

1. CSS:

.rfdDecorated
{
 padding-left: 4px !important;
}

2. Server declaration

<asp:Button ID="Button1" runat="server" Width="20px" Text="OK" />

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.
0
Newton
Top achievements
Rank 2
answered on 07 Jul 2009, 09:39 AM
Thank's Martin... you are the man !!!
0
Jon
Top achievements
Rank 1
answered on 07 Jul 2009, 10:23 AM
I don't suppose that there is a general workaround is there?  Or was that it?

Regards,

Jon
0
Martin
Telerik team
answered on 07 Jul 2009, 01:17 PM
Hello Jon,

I believe that this may work as a general fix, until we add it in the skins of FormDecorator.

Regards,
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.
0
Sylvain
Top achievements
Rank 1
answered on 07 Jul 2009, 01:56 PM
This may be a workaround, but the buttons are still styled differently than they were previously. The left and right padding have been increased, sort of like for default HTML buttons.
If the button text is long, then the padding really adds a lot to the width of the button.
I was much happier when FormDecorator was not adding any excessive left and right padding to the buttons.
Why the change? Is this on purpose?
0
Jon
Top achievements
Rank 1
answered on 07 Jul 2009, 02:06 PM
Thanks Martin,  I'll give it a shot in the next few days.

I like the change much more than the old style but can see Sylvian's point - especially when buttons were positioned carefully.  Luckily I don't personally have the issue but can imagine lots of situations where it might come up for other people.

I suppose that it's one of those situations where you can never win, some people want a change, others don't so who do you keep happy.

Regards,

Jon



0
Jon
Top achievements
Rank 1
answered on 08 Jul 2009, 08:23 PM
Hi Martin,

I tested it and it works so thanks for that.

As I mentioned before the new buttons look great - I used to hate the old compressed style so nice one on that.

Regards,

Jon
0
Sylvain
Top achievements
Rank 1
answered on 08 Jul 2009, 08:30 PM
I can understand that some people like the "compressed" while some other like the "non-compressed" style as Jon described it.
However, when something that affects the UI this way is suddenly changed with no explanation or notice (or maybe I missed it), it doesn't help everybody and creates more work for some of us.

To Telerik
: Is there (going to be) an option to set the look of the buttons the way it was until Q1 2009?

0
Jon
Top achievements
Rank 1
answered on 08 Jul 2009, 09:17 PM
Hi Sylvian,

Could you figure out the CSS from the old style using Visual Studio and also on the new style and then simply reverse using the !important flag in css what they've done?

Hope you figure it.

Cheers,

Jon
0
Martin
Telerik team
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.
0
Sylvain
Top achievements
Rank 1
answered on 09 Jul 2009, 02:02 PM
Martin,

I wasn't talking about pre Q1 2009 skins. The RadFormDecorator styling for buttons was consistent (no excessive padding on the left and right sides) until Q2 2009 (or beta I guess) came out, where it got changed, and now I have some buttons that don't fit anymore.

Sylvain
0
Jon
Top achievements
Rank 1
answered on 09 Jul 2009, 04:03 PM
Hi All,

I think that the height of the button (or a textbox, a combo box or the fieldset) has also changed.  Some fieldsets on my pages now have different heights to just before the new version came out - I know for certain because it was yesterday when I had a nightmare sorting it out.

Can I suggest that dimension changes are documented in the release notes as a form of breaking change?

Cheers,

Jon

0
Martin
Telerik team
answered on 10 Jul 2009, 05:50 AM
Hello Jon,

There are not changes in the dimensions of the elements you have specified. Most probably, there is a change with the padding of the skinned buttons which is manifested in IE7 due to a bug in certain cases, when the parent element has a margin applied. If you experience that behavior, I will give you a fix, however there are no changes in the dimensions of the other skinned elements.

Sincerely yours,
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.
0
Jon
Top achievements
Rank 1
answered on 10 Jul 2009, 07:07 AM
Hi Martin,

There isn't a change to the margin of the direct parent of the button (table cell) but there is to the fieldset that the table is in and the div that the fieldset is in.  I'll do a little more testing on this one and give you some more information when I'm sure what's causing it - I must remove the tables for a start ;)

Regards,

Jon
0
Martin
Telerik team
answered on 10 Jul 2009, 07:18 AM
Hello Jon,

Okay, please, let me know if you find out more about these differencies. Before and After screenshots will be highly appreciated as well.

Best wishes,
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.
0
Jon
Top achievements
Rank 1
answered on 10 Jul 2009, 08:09 AM
Will do Martin.

BTW, after you apply the button fix firefox shows the button wrongly.  Doesn't affect me too much but will affect some people I suppose.

How do we put screenshots on the forums?  Or is that via a support ticket?

Regards,

Jon
0
Martin
Telerik team
answered on 10 Jul 2009, 08:20 AM
Hello Jon,

Sorry, I forgot to tell that the fix should be IE7 specific only. Simply add *+html before the class name, i.e:

*+html .rfdDecorated
{
 padding-left: 4px !important;
}


Now the code will not work with any other browser, but only in IE7.

Sincerely yours,
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.
0
Jon
Top achievements
Rank 1
answered on 10 Jul 2009, 08:38 AM
Hi Martin,

IE6 goes lopsided after applying it to IE7 so I used the IE6 hack to put it in for that too.  Now it works on FF, IE6 & IE7 so thanks for the help.

I hadn't seen the IE7 hack before.  I wonder if MS introduce them on purpose to cater for these instances - you'd hope it was by design ;)

Regards,

Jon
0
Sylvain
Top achievements
Rank 1
answered on 31 Aug 2009, 03:51 PM
I just updated to Q2 2009 SP1, and the problem with the left padding of buttons being smaller than the right padding is still there (the text of the button is not centered properly as a result). I'm surprised that this was not included with this SP.
0
Martin
Telerik team
answered on 02 Sep 2009, 08:44 AM
Hello Sylvain,

The fix is not added yet, because we are still not quite sure that it won't have impact on other settings. However, you may use it externally:

*+html .rfdSkinnedButton *
{
 padding-left: 6px !important;
}


All the best,
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.
0
Jon
Top achievements
Rank 1
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-left4px !important;    
        }   
 
        button img  
        {  
            height16px ! important;  
            width16px;  
            line-height16px;  
            vertical-align:middle;  
            padding-left0px !important;   
            margin-left0px !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/> 



0
Jon
Top achievements
Rank 1
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  
        {  
            height16px ! important;  
            width16px;  
            line-height16px;  
            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;  
        } 
0
Martin
Telerik team
answered on 03 Nov 2009, 07:12 AM
Hi Jon,

Thank you for this. We will extensively test the CSS you've sent and if it is bulletproof we will add it to the skins of FormDecorator.

Kind regards,
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.
0
Jon
Top achievements
Rank 1
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
0
Martin
Telerik team
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.
Tags
FormDecorator
Asked by
Jon
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
Jon
Top achievements
Rank 1
Sylvain
Top achievements
Rank 1
Newton
Top achievements
Rank 2
Martin
Telerik team
Share this question
or