1 2 Previous Next 16 Replies Latest reply: Feb 24, 2012 3:48 AM by gonzalad RSS

rounded corner support out of the box

gonzalad Apprentice

Hello,

 

Is it possible to add rounded corner support to richfaces native styles ?

Afterward, as a user just specify a kin property as roundCorner=4px and voila : all components have round corners.

 

Something like jquery ui round-corner support (http://jqueryui.com/themeroller/) - using only css, no img.

 

WDYT ?

 

jQuery UI uses those styles for instance :

  1. -moz-border-radius-bottomright: 4px/*{cornerRadius}*/;
  2. -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/;
  3. -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/;
  4. border-bottom-right-radius: 4px/*{cornerRadius}*/;
  • 2. Re: rounded corner support out of the box
    Brendan Healey Master

    I suppose the issue for the developers is that without using background images you can't get rounded

    corners in IE8 (don't know about IE9), and the approach often taken seems to be to not use rounded

    corners at all, for any browser, which is unfortunate.

     

    There a really good solution here http://css3pie.com/ using html script files (.htc) and I use this for

    rounded corner buttons, but I just did a quick test on a rich:panel and voila! instantly I have a rounded

    corner panel. I've tested this solution on IE8 and Chrome and I've found it to be reliable over the past

    year or so.

     

    Regards,

    Brendan.

  • 3. Re: rounded corner support out of the box
    gonzalad Apprentice

    Thanks for the answer,

     

    IMO since rounded corners have just an aesthetic usefulness (and not a functionnal one) a good compromise would be to just use CSS 3 styles (and modern browser equivalent ones) and just drop IE 8 support for this (IE 8 will display square corners) - as jQuery UI does.

     

    This would enable to have a simple and enough usefull solution (I think).

  • 4. Re: rounded corner support out of the box
    Josh Schneider Newbie

    Hi, Brendan

     

    I've added a config to my web.xml for parsing htc files (on WebSphere), but it's still failing. Did you do anything else to get cssPIE to work? Thanks.

     

    <mime-mapping>
            <extension>htc</extension>
            <mime-type>text/x-component </mime-type>
      </mime-mapping>
  • 5. Re: rounded corner support out of the box
    Brendan Healey Master

    Hi Josh, how is it failing? just not doing what it's supposed to do, or do you see any errors in the javascript

    console when you load a page using this? I use it like this:

     

    1. Put PIE.htc in the context-root/resources/scripts directory.

     

    2. Add this to your project stylesheet:

     

    .pie {

        /* css3pie.com */

        position: relative;

        z-index: 0;

        border: 1px solid #696;

        padding: 2px 5px;

        margin: 2px 2px;

        text-align: center;

        font-size: 11px;

        font-weight: bold;

        color: white;

        -webkit-border-radius: 8px;

        -moz-border-radius: 8px;

        border-radius: 8px;

        -webkit-box-shadow: #666 0px 2px 3px;

        -moz-box-shadow: #666 0px 2px 3px;

        box-shadow: #666 0px 2px 3px;

        background: #2586d7;

        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2586d7), to(#66ccff));

        background: -moz-linear-gradient(#2586d7, #66ccff);

        background: linear-gradient(#2586d7, #66ccff);

        -pie-background: linear-gradient(#2586d7, #66ccff);

        behavior: url("#{resource['scripts:PIE.htc']}");

    }

     

    .pie:disabled {

        /* css3pie.com */

        position: relative;

        z-index: 0;

        border: 1px solid #696;

        padding: 2px 5px;

        margin: 2px 2px;

        text-align: center;

        font-size: 11px;

        font-weight: bold;

        color: #dfdfdf;

        -webkit-border-radius: 8px;

        -moz-border-radius: 8px;

        border-radius: 8px;

        -webkit-box-shadow: #666 0px 2px 3px;

        -moz-box-shadow: #666 0px 2px 3px;

        box-shadow: #666 0px 2px 3px;

        background: #2586d7;

        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2586d7), to(#66ccff));

        background: -moz-linear-gradient(#2586d7, #66ccff);

        background: linear-gradient(#2586d7, #66ccff);

        -pie-background: linear-gradient(#2586d7, #66ccff);

        behavior: url("#{resource['scripts:PIE.htc']}");

    }

     

    .pie:hover {

        border: 1px solid #696;

        padding: 2px 5px;

        margin: 2px 2px;

        text-align: center;

        font-size: 11px;

        font-weight: bold;

        color: white;

        -webkit-border-radius: 8px;

        -moz-border-radius: 8px;

        border-radius: 8px;

        -webkit-box-shadow: #666 0px 2px 3px;

        -moz-box-shadow: #666 0px 2px 3px;

        box-shadow: #666 0px 2px 3px;

        background: #66ccff;

        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#66ccff), to(#2586d7));

        background: -moz-linear-gradient(#66ccff, #2586d7);

        background: linear-gradient(#66ccff, #2586d7);

        -pie-background: linear-gradient(#66ccff, #2586d7);

        behavior: url("#{resource['scripts:PIE.htc']}");

    }

     

    3. Use styleClass="pie" on anything you want to get the pie treatment, I use it mainly on h:commandButton

        & a4j:commandButton.

     

    Regards,

    Brendan.

     

    p.s. I think there's a cleaner way of structuring this css, I'll check...

  • 6. Re: rounded corner support out of the box
    Sushant Saini Novice

    Hey I had the same query couple of years ago . How to make the corners round without any image. This turned out to be huge for me as my client was hell bent on getting round corners and Richfaces does not have build in support for this. Somebody on Richfaces suggested using Jquery which isworking perfectly fine for my for last couple of year. Until you get Richfaces people to provide the support, use following for the same effect.

     

     

    <script type="text/javascript" src="js/jquery.corner.js" />

     

    $(function(){

                                             jQuery("td.rich-tab-header").corner("top").css("background-color", "#8F98A0");

                                             jQuery("div.rich-panel-header").corner("top").css("background-color", "#8F98A0");

                                             

                                             jQuery("div.rich-stglpanel-header").corner("top").css("background-color", "#8F98A0");

                                                        });

     

      }

  • 7. Re: rounded corner support out of the box
    gonzalad Apprentice

    Cool ! Even works on IE8 !

     

    Thanks Sushant

  • 8. Re: rounded corner support out of the box
    Brendan Healey Master

    Hey, jquery.corner.js is neat, thanks for pointing it out. It's also a third of the size of pie. Very nice

    solution.

  • 9. Re: rounded corner support out of the box
    Brian Leathem Master

    Are there any community members who want to contribute a RichFaces skin providing rounded corners?  We'd welcome the contribution!

  • 10. Re: rounded corner support out of the box
    Brendan Healey Master

    One fairly major problem for me with jquery.corner.js is that it doesn't support styline input

    tags in IE, so that rules out commandButtons unfortunately. Maybe there's something else

    out there, I will have a  look...

     

    https://github.com/malsup/corner/issues/36

  • 11. Re: rounded corner support out of the box
    Josh Schneider Newbie

    @Brendan, RE: pie.HTC:

     

    Thanks.

     

    I think my problem may have been the page-relative URL I was using in my CSS. However, I also learned how to actually define the mime type within WebSphere, and that may also have helped. On the plus side, I can now use background-image (stretched) for custom boxes with rounded-corner, gradient-filled borders. On the downside, it seems that this and other methods just fail in one way or another trying to add rounded corner support for jQuery UI widgets in older IE versions.

     

    I may be giving up on that, but I may also try a js solution like jquery corner. The benefits of using htc files for IE-only support is attractive and works well for general CSS3 support, just not in conjunction with the jQuery UI.

  • 12. Re: rounded corner support out of the box
    gonzalad Apprentice

    @Brian, I'll try to contribute, but I've pb running showcase project with 'mvn jetty:run'.

    What's the easiest way to test showcase before modifying .ecss code ?

     

    Thanks

     

    Note : I've forked RF on github (develop branch),

  • 13. Re: rounded corner support out of the box
    gonzalad Apprentice

    Sorry ignore previous post, this was an error I forked showcase in richfaces sandbox project (very old one)...

  • 14. Re: rounded corner support out of the box
    gonzalad Apprentice

    Hello,

     

    Just implemented round-border support with CSS 3.

     

    See linked pull requests in  https://issues.jboss.org/browse/RF-11848

     

    Sorry, couldn't upload RF showcase to gae (don't have mobile phone - so no SMS ;( ).

     

    Hope this helps

1 2 Previous Next