If zoom level changed, buttons look wrong

2 posts, 0 answers
  1. Stephen
    Stephen avatar
    12 posts
    Member since:
    Oct 2010

    Posted 06 Jul 2012 Link to this post

    Hi all,

    I'm developing a system at present, and one of the requirements is that the site can be resized using a selector.  I can see that there have been discussions about this in the past and that telerik recommend that 3 different custom skins be developed and have a switching mechanism to achieve this.  My graphic designer isn't very happy about having to make 3 skins, so I'm trying this approach with jquery:

    <script type="text/javascript">
          $(document).ready(function () {
              $("#textZoom1").click(function () {
                  $("body").css("zoom", "1");
                  $.cookie("HRI-ZoomLevel", "1");
              });
     
              $("#textZoom2").click(function () {
                  $("body").css("zoom", "1.1");
                  $.cookie("HRI-ZoomLevel", "1.1");
              });
     
              $("#textZoom3").click(function () {
                  $("body").css("zoom", "1.2");
                  $.cookie("HRI-ZoomLevel", "1.2");
              });
     
              var zoomLevel = $.cookie("HRI-ZoomLevel");
              if (zoomLevel != null) {
                  $("body").css("zoom", zoomLevel);
              }
          });
      </script>


    When I do this, the buttons (and tabs) look slightly wrong as demonstrated in the attachments (using the demo site)

    I can adjust the padding to the background position of the button and apply a different css class to the body for each zoom level, but this just seems messy.

    Is there a fix for this issue, or would you recommend that I force my designer to make 3 skins?

    Thanks for your time.
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 09 Jul 2012 Link to this post

    Hello,

    As discussed earlier, when a sprite image is used it can not be zoomed - the result is the one showed in your attachments.

    I would recommend not to force your designer to make more custom skins, but to use CSS3 and button type link button - this way you`ll skip the sprite images and will have more detailed control over all and the zoom will work fine:

    <head runat="server">
        <title></title>
        <style type="text/css">
            a.rbLinkButton.RadButton {
                border-radius: 6px;
                color: #fff;
                /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                background: -moz-linear-gradient(top, #c7c7c7 0%, #6f6f6f 100%); /* FF3.6+ */
                background: -webkit-linear-gradient(top, #c7c7c7 0%,#6f6f6f 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #c7c7c7 0%,#6f6f6f 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #c7c7c7 0%,#6f6f6f 100%); /* IE10+ */
                background: linear-gradient(top, #c7c7c7 0%,#6f6f6f 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#6f6f6f',GradientType=0 ); /* IE6-8 */
            }
             
            a.rbLinkButton.RadButton:hover {
                color: #000;
                /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                background: -moz-linear-gradient(top, #ffe68b 0%, #fff3c9 100%); /* FF3.6+ */
                background: -webkit-linear-gradient(top, #ffe68b 0%,#fff3c9 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #ffe68b 0%,#fff3c9 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #ffe68b 0%,#fff3c9 100%); /* IE10+ */
                background: linear-gradient(top, #ffe68b 0%,#fff3c9 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe68b', endColorstr='#fff3c9',GradientType=0 ); /* IE6-8 */
            }
             
            a.rbLinkButton.RadButton:active {
                color: #000;
                /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                background: -moz-linear-gradient(top, #f8d04c 0%, #feed76 100%); /* FF3.6+ */
                background: -webkit-linear-gradient(top, #f8d04c 0%,#feed76 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #f8d04c 0%,#feed76 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #f8d04c 0%,#feed76 100%); /* IE10+ */
                background: linear-gradient(top, #f8d04c 0%,#feed76 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8d04c', endColorstr='#feed76',GradientType=0 ); /* IE6-8 */
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="Link Button" Height="35"
            Skin="Default">
        </telerik:RadButton>
        </form>
    </body>
    </html>


    Greetings,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top