Rendering of Buttons in Beta of Q2

30 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 03 Jul 2009 Link to this post

    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 
  3. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 06 Jul 2009 Link to this post

    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.
  5. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 06 Jul 2009 Link to this post

    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
  7. Sylvain
    Sylvain avatar
    31 posts
    Member since:
    Jun 2006

    Posted 06 Jul 2009 Link to this post

    Apparently, it was not fixed for Q2 2009 :(
    I'm hoping it will be fixed quickly as it doesn't look good.
  9. Newton
    Newton avatar
    26 posts
    Member since:
    Sep 2005

    Posted 06 Jul 2009 Link to this post

    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
  11. Answer
    Martin
    Admin
    Martin avatar
    585 posts

    Posted 06 Jul 2009 Link to this post

    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.
  13. Newton
    Newton avatar
    26 posts
    Member since:
    Sep 2005

    Posted 07 Jul 2009 Link to this post

    Thank's Martin... you are the man !!!
  15. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 07 Jul 2009 Link to this post

    I don't suppose that there is a general workaround is there?  Or was that it?

    Regards,

    Jon
  17. Martin
    Admin
    Martin avatar
    585 posts

    Posted 07 Jul 2009 Link to this post

    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.
  19. Sylvain
    Sylvain avatar
    31 posts
    Member since:
    Jun 2006

    Posted 07 Jul 2009 Link to this post

    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?
  21. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 07 Jul 2009 Link to this post

    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



  23. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 08 Jul 2009 Link to this post

    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
  25. Sylvain
    Sylvain avatar
    31 posts
    Member since:
    Jun 2006

    Posted 08 Jul 2009 Link to this post

    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?

  26.
  27. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 08 Jul 2009 Link to this post

    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
  29. Martin
    Admin
    Martin avatar
    585 posts

    Posted 09 Jul 2009 Link to this post

    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.
  31. Sylvain
    Sylvain avatar
    31 posts
    Member since:
    Jun 2006

    Posted 09 Jul 2009 Link to this post

    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
  32.
  33. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 09 Jul 2009 Link to this post

    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

  35. Martin
    Admin
    Martin avatar
    585 posts

    Posted 10 Jul 2009 Link to this post

    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.
  37. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 10 Jul 2009 Link to this post

    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
  39. Martin
    Admin
    Martin avatar
    585 posts

    Posted 10 Jul 2009 Link to this post

    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.
  41. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 10 Jul 2009 Link to this post

    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
  43. Martin
    Admin
    Martin avatar
    585 posts

    Posted 10 Jul 2009 Link to this post

    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.
  45. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 10 Jul 2009 Link to this post

    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
  47. Sylvain
    Sylvain avatar
    31 posts
    Member since:
    Jun 2006

    Posted 31 Aug 2009 Link to this post

    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.
  49. Martin
    Admin
    Martin avatar
    585 posts

    Posted 02 Sep 2009 Link to this post

    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.
  51. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 29 Oct 2009 Link to this post

    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/> 



  53. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 30 Oct 2009 Link to this post

    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;  
            } 
  55. Martin
    Admin
    Martin avatar
    585 posts

    Posted 03 Nov 2009 Link to this post

    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.
  57. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 03 Nov 2009 Link to this post

    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
  59. Martin
    Admin
    Martin avatar
    585 posts

    Posted 05 Nov 2009 Link to this post

    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.
Back to Top