ICEfaces
  1. ICEfaces
  2. ICE-7785

Find Workaround for ACE Component styling issues in Liferay 5

          Details

          • Type: Improvement Improvement
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: 3.0
          • Fix Version/s: 3.0.1, EE-3.0.0.GA
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            Portlets, Liferay 5
          • Affects:
            Documentation (User Guide, Ref. Guide, etc.)

            Description

            After solving the problems reported in ICE-7717, there were still some styling issues in some ACE components. The Liferay 5 UI was also affected, specifically in the Add Application menu. Further debugging revealed that the presence of combined.css, in particular the contents of jquery-ui.css were causing these issues.

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              Arturo Zambrano added a comment -

              The specific styling issues are the following:

              • the content of the Add Application dialog of Liferay has an indentation (the left half of the dialog area is blank).
              • menu components: all menu items show bullets and they are outside the menu area.
              • ace:dialog: the Liferay dialog styling is applied, overriding the theme and altering the structure.
              • drag and drop: the Liferay styling interferes, making certain features like ghosting not work.
              • resizable: the Liferay styling is applied, placing handles in every direction, not looking right.

              Unfortunately, Liferay 5 also uses the same jQuery UI convention we use of CSS class names in various parts of its UI, without taking measures to avoid affecting other content on the page that uses the same CSS class name patterns. This means that in our case, there are two sets of styling rules that are applied to the components mentioned above. Whichever set of rules that is loaded last (usually Liferay's) is the one being applied on the page. If somehow we managed to load our styling rules last, then we would be affecting the Liferay UI. So, this is a logical contradiction and there can't be a proper fix for this situation.

              However, it is possible to come up with a workaround, which would consist in wrapping our components/portlets in a container <div> and add a class name to it (let's say 'ace'), so that we can define an additional set of rules which will only be applied to elements preceded by the 'ace' class name. This set of rules would most likely be defined in a <style> element somewhere on the page and will try to undo the styling from Liferay in the ace components.

              Show
              Arturo Zambrano added a comment - The specific styling issues are the following: the content of the Add Application dialog of Liferay has an indentation (the left half of the dialog area is blank). menu components: all menu items show bullets and they are outside the menu area. ace:dialog: the Liferay dialog styling is applied, overriding the theme and altering the structure. drag and drop: the Liferay styling interferes, making certain features like ghosting not work. resizable: the Liferay styling is applied, placing handles in every direction, not looking right. Unfortunately, Liferay 5 also uses the same jQuery UI convention we use of CSS class names in various parts of its UI, without taking measures to avoid affecting other content on the page that uses the same CSS class name patterns. This means that in our case, there are two sets of styling rules that are applied to the components mentioned above. Whichever set of rules that is loaded last (usually Liferay's) is the one being applied on the page. If somehow we managed to load our styling rules last, then we would be affecting the Liferay UI. So, this is a logical contradiction and there can't be a proper fix for this situation. However, it is possible to come up with a workaround, which would consist in wrapping our components/portlets in a container <div> and add a class name to it (let's say 'ace'), so that we can define an additional set of rules which will only be applied to elements preceded by the 'ace' class name. This set of rules would most likely be defined in a <style> element somewhere on the page and will try to undo the styling from Liferay in the ace components.
              Hide
              Permalink
              Arturo Zambrano added a comment -

              The following styling rules solve all of the issues mentioned above, except the drag and drop issues, which turned out to be more involved and not solvable with just CSS.

              <style type="text/css">
              /* remove bullets from ACE menu components */
              .ace .wijmo-wijmenu-list li

              { list-style-type: none; list-style-position: inside; }

              /* avoid displaying all resizing handles, except for southeast handle */
              .ace .ui-resizable-n, .ace .ui-resizable-s, .ace .ui-resizable-e, .ace .ui-resizable-w, .ace .ui-resizable-sw, .ace .ui-resizable-nw, .ace .ui-resizable-ne

              { background-image: none; }

              /* change background of ACE dialog header, affected by Liferay's styling (modify according to your theme) */
              .ace .ui-dialog-titlebar {
              background-color: #cccccc;
              background-image: url("#

              {resource['icefaces.ace:themes/sam/images/ui-default.png']}

              ");
              }
              /* remove Liferay's close icon from ACE dialog */
              .ace .ui-dialog .ui-dialog-titlebar-close

              { background-image: none; }

              /* adjust dialog's header text, according to your theme */
              .ace .ui-dialog-title-dialog {

              }
              /* fix Liferay's dialog, affected by ACE styling */
              .ui-dialog .ui-dialog-content

              { overflow: visible; }

              .ace .ui-dialog .ui-dialog-content

              { overflow: auto; }

              </style>

              This style tag should go at the top of the page that defines the portlet. For example, in the showcase portlets, it should go inside <ui:define name="example">, at the top. Only one style tag is necessary for the whole page (i.e. it is not necessary to do this for every portlet). Additionally, the contents of the portlet that contain ACE components have to be surrounded by a container div with the 'ace' CSS class (i.e. <div class="ace">). This has to be done for every portlet that contains ACE components.

              Show
              Arturo Zambrano added a comment - The following styling rules solve all of the issues mentioned above, except the drag and drop issues, which turned out to be more involved and not solvable with just CSS. <style type="text/css"> /* remove bullets from ACE menu components */ .ace .wijmo-wijmenu-list li { list-style-type: none; list-style-position: inside; } /* avoid displaying all resizing handles, except for southeast handle */ .ace .ui-resizable-n, .ace .ui-resizable-s, .ace .ui-resizable-e, .ace .ui-resizable-w, .ace .ui-resizable-sw, .ace .ui-resizable-nw, .ace .ui-resizable-ne { background-image: none; } /* change background of ACE dialog header, affected by Liferay's styling (modify according to your theme) */ .ace .ui-dialog-titlebar { background-color: #cccccc; background-image: url("# {resource['icefaces.ace:themes/sam/images/ui-default.png']} "); } /* remove Liferay's close icon from ACE dialog */ .ace .ui-dialog .ui-dialog-titlebar-close { background-image: none; } /* adjust dialog's header text, according to your theme */ .ace .ui-dialog-title-dialog { } /* fix Liferay's dialog, affected by ACE styling */ .ui-dialog .ui-dialog-content { overflow: visible; } .ace .ui-dialog .ui-dialog-content { overflow: auto; } </style> This style tag should go at the top of the page that defines the portlet. For example, in the showcase portlets, it should go inside <ui:define name="example">, at the top. Only one style tag is necessary for the whole page (i.e. it is not necessary to do this for every portlet). Additionally, the contents of the portlet that contain ACE components have to be surrounded by a container div with the 'ace' CSS class (i.e. <div class="ace">). This has to be done for every portlet that contains ACE components.
              Hide
              Permalink
              Ken Fyten added a comment -

              Please document the known issues and suggested workaround styling in this Wiki topic page: http://wiki.icesoft.org/display/ICE/Custom+ACE+Styles+for+Liferay+Portal

              Show
              Ken Fyten added a comment - Please document the known issues and suggested workaround styling in this Wiki topic page: http://wiki.icesoft.org/display/ICE/Custom+ACE+Styles+for+Liferay+Portal
              Hide
              Permalink
              Arturo Zambrano added a comment -

              The workaround was documented in the wiki page mentioned above.

              Show
              Arturo Zambrano added a comment - The workaround was documented in the wiki page mentioned above.

                People

                • Assignee:
                  Arturo Zambrano
                  Reporter:
                  Arturo Zambrano
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  0 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: