1 2 Previous Next 15 Replies Latest reply on Feb 19, 2012 2:27 AM by subhash.kumar Go to original post
      • 15. Re: Rounded corner in RichFaces component.
        subhash.kumar Feb 19, 2012 2:27 AM (in response to narvava)

        Though its an old thread, thought this might help someone new to this:

         

        I have used the plugin  http://www.curvycorners.net

         

        I was trying to apply the corners to the rich panel id directly (myBox), but after a while i found that the generated div's ids are not exactly the same (myBoxContentDiv, myBoxShadowDiv).

         

        <script type="text/JavaScript" src="js/curvycorners.js"></script>

<script type="text/JavaScript">

function round() {


    var settings = {
        tl: {
            radius: 20
        },
        tr: {
            radius: 20
        },
        bl: {
            radius: 20
        },
        br: {
            radius: 20
        },
        antiAlias: true
    };


    //to round the modal panel 
    curvyCorners(settings, '#myBoxContentDiv');


    //to round the shadow around the modal panel
    curvyCorners(settings, '#myBoxShadowDiv');

}



</script>


    <body>
          <rich:modalPanel id="myBox" onshow="round()" width="350" height="100">
               <h:outputText value="Demo - rounded edge modal panel"></h:outputText>
         </rich:modalPanel>

          <h:form>
              <h:outputLink value="#" id="link">
                  Show Modal Panel 
                  <rich:componentControl for="myBox" attachTo="link" operation="show" event="onclick"/>
              </h:outputLink>
          </h:form>
     </body>
          • Actions
        1 2 Previous Next