ICEfaces
  1. ICEfaces
  2. ICE-10026

HTML5 DocType styling issues (was: WildFly8 specific styling issues)

          Details

          • Type: Bug Bug
          • Status: Closed
          • Priority: Minor Minor
          • Resolution: Fixed
          • Affects Version/s: EE-3.3.0.GA_P01
          • Fix Version/s: EE-3.3.0.GA_P02, 4.0
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            Jenkins EE 3 trunk Build #424
            Server: WildFly 8 (not an issue on Tomcat7)
            Browsers: all except Safari.
          • Assignee Priority:
            P2

            Description

            WildFly8 testing found the next styling issues:

            1) showcase > ace:selectMenu > all demos:
            Component renders as in attached screen shot (capture.PNG).
            This issue can be reproduced also with QA test application for selectMenu, if installed on WildFly8.

            2) Ace:selectMenu inside ice:panelTabSet (tabSet.PNG).
            1. Capture.PNG
              54 kB
            2. tabSet.PNG
              55 kB

              Activity

              Ascending order - Click to sort in descending order
              7 older comments
              Hide
              Permalink
              Ken Fyten added a comment -

              This makes sense, except that this issue is being reported against EE 3.3 P02 which should be using JSF 2.1, not JSF 2.2?

              Show
              Ken Fyten added a comment - This makes sense, except that this issue is being reported against EE 3.3 P02 which should be using JSF 2.1, not JSF 2.2?
              Hide
              Permalink
              Carmen Cristurean added a comment -

              For this test, the JSF version used was WildFly8 server's default v. 2.1.2.

              Show
              Carmen Cristurean added a comment - For this test, the JSF version used was WildFly8 server's default v. 2.1.2.
              Hide
              Permalink
              Arturo Zambrano added a comment -

              This extra spacing is a known issue with HTML5. There are a number of possible solutions described on various sites...

              http://www.emailonacid.com/blog/details/C13/12_fixes_for_the_image_spacing_in_html_emails
              http://www.andymatthews.net/read/2011/01/02/Resolving-gaps-and-spaces-in-table-cells-when-using-the-HTML-5-doctype
              http://bytes.com/topic/html-css/answers/943492-background-leaksbelow-image-table-cell-html5

              As for the ice:panelTabSet issue. The extra spacing is simply caused by having an <img> element inside a <td> element, even if the <img> element has no source image. This can be fixed by adding line-height:0; to the <td> element. This fix doesn't break things with HTML4.

              As for the ace:selectMenu issue, the fix seems more complex because of some other markup involved. So the fix could be the one reported above, done with Javascript.

              Show
              Arturo Zambrano added a comment - This extra spacing is a known issue with HTML5. There are a number of possible solutions described on various sites... http://www.emailonacid.com/blog/details/C13/12_fixes_for_the_image_spacing_in_html_emails http://www.andymatthews.net/read/2011/01/02/Resolving-gaps-and-spaces-in-table-cells-when-using-the-HTML-5-doctype http://bytes.com/topic/html-css/answers/943492-background-leaksbelow-image-table-cell-html5 As for the ice:panelTabSet issue. The extra spacing is simply caused by having an <img> element inside a <td> element, even if the <img> element has no source image. This can be fixed by adding line-height:0; to the <td> element. This fix doesn't break things with HTML4. As for the ace:selectMenu issue, the fix seems more complex because of some other markup involved. So the fix could be the one reported above, done with Javascript.
              Hide
              Permalink
              Arturo Zambrano added a comment -

              Committed fixes to 3.3 EE maintenance branch at revision 41258 and to the P02 tag at revision 41260. Added specific fixes for the spacing issues in ice:panelTabSet and ace:selectMenu. The fixes for ice:panelTabSet involve using style="line-height:0;" on the <td> elements that compose the tab and also adding align="left" on the spacer <img> elements. The fix for ace:selectMenu consists in adjusting the height of the value field, as it is routinely done for the down arrow button.

              Show
              Arturo Zambrano added a comment - Committed fixes to 3.3 EE maintenance branch at revision 41258 and to the P02 tag at revision 41260. Added specific fixes for the spacing issues in ice:panelTabSet and ace:selectMenu. The fixes for ice:panelTabSet involve using style="line-height:0;" on the <td> elements that compose the tab and also adding align="left" on the spacer <img> elements. The fix for ace:selectMenu consists in adjusting the height of the value field, as it is routinely done for the down arrow button.
              Hide
              Permalink
              Carmen Cristurean added a comment -

              Fix confirmed with EE 3.3.0_P02 Build9 / EE-3.3.0-maintenance branch rev. 41277 in showcase and selectMenu QA test app in IE10, Chrome35 and FF 29 on WildFly 8/ with Mojarra 2.1.28.

              Show
              Carmen Cristurean added a comment - Fix confirmed with EE 3.3.0_P02 Build9 / EE-3.3.0-maintenance branch rev. 41277 in showcase and selectMenu QA test app in IE10, Chrome35 and FF 29 on WildFly 8/ with Mojarra 2.1.28.

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: