3 Replies Latest reply on Oct 1, 2015 5:23 AM by vidyasagar penugonda

    How to change rich:popupPanel background opacity

    vidyasagar penugonda Novice

      Hi,

       

      I want to change the rich:popupPanel background opacity. It is using below style class to show the background opacity. If I override this class it is applying to all popup panels in applications. but I want to change this style for only one popup in my application. So, how can I change the opacity value for a single popup. Please help me to change style of popup panel.

       

          .rf-pp-shade {

            filter: alpha(opacity=50); BACKGROUND-COLOR: rgb(208,208,208); WIDTH: 100%;

          }

        • 1. Re: How to change rich:popupPanel background opacity
          Michal Petrov Master

          Every component has a styleClass attribute, use it to set a parent class for the selector - .yourStyleClass .rf-pp-shade {…} (btw that alpha filter only works in IE)

          • 2. Re: How to change rich:popupPanel background opacity
            vidyasagar penugonda Novice

            Thank you Michal for your quick Response. I made the changes as you mention. but nothing happens. below is the changed style class. please correct me if I did any wrong here. if I use styleClass on rich:popupPanel it is applying to the inner div. if you see the generated html, It has two div elements one is for background to cover entire screen with opacity and another one is having our content. if we apply styleClass it is applying to the inner div which having out content.

             

            Changed Code:

            <h:outputStylesheet>

                .progressStyle .rf-pp-shade {

                  filter: alpha(opacity=1); BACKGROUND-COLOR: rgb(208,208,208); WIDTH: 100%;

                }

            </h:outputStylesheet>

             

            <rich:popupPanel id="modalPanelProgress"  autosized="true" modal="true" immediate="true" styleClass="progressStyle">

                ......

            </rich:popupPanel>

             

            generated HTML code

            poup_style.PNG

             

            if you see the above code our style class is applied to inner div which having 'rf-pp-cntr' style class.

            • 3. Re: How to change rich:popupPanel background opacity
              vidyasagar penugonda Novice

              Michal, sorry if I am wrongly understood your response, If I apply style like below it is working..

               

                #modalPanelProgress_shade

                {

                     filter: alpha(opacity=1); BACKGROUND-COLOR: rgb(208,208,208); WIDTH: 100%;

                }