ICEfaces
  1. ICEfaces
  2. ICE-2302

Firefox rendering problems with <ice:panelTab/> and <ice:selectInputDate/>

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.7DR#2
    • Fix Version/s: 1.7DR#3, 1.7
    • Component/s: None
    • Labels:
      None
    • Environment:
      Windows / Liferay 4.3.3 + Tomcat 6.0.13

      Description

      This is very easy to reproduce. Simply download any of the sample-icefaces* portlets from the Liferay website and stick it in your Liferay 4.3.3 "hot deploy" folder.

      When you visit the portlet with Firefox, you'll see a problem with the rendering of the <ice:panelTab/> component, in that the left edge doesn't line up right with the form below.

      Additionally, the date field is really tall and has a wierd font. Firebug reveals that the css "class" attribute has a value of "iceSelInpDateInput Input portlet-form-input-fieldInput" which is likely the problem. It's appending "Input" to the portlet-form-input-field class for some reason. This is remenicent of ICE-1621.

      I tried this with ICEfaces 1.6.0 and also the trunk as of 10/31/2007 and both have the same problem.
      1. screenshot-1.jpg
        25 kB
      2. screenshot-2.jpg
        191 kB
      3. screenshot-3.jpg
        114 kB
      4. screenshot-4.jpg
        108 kB

        Activity

        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]
        Assignee Yip Ng [ yip.ng ]
        Ken Fyten made changes -
        Fix Version/s 1.7 [ 10080 ]
        Hide
        Neil Griffin added a comment -

        Verified as fixed during testing of ICEfaces 1.7RC1

        Show
        Neil Griffin added a comment - Verified as fixed during testing of ICEfaces 1.7RC1
        yip.ng made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        yip.ng made changes -
        Attachment screenshot-4.jpg [ 10757 ]
        Hide
        yip.ng added a comment -

        Regression testing on IE.

        Show
        yip.ng added a comment - Regression testing on IE.
        yip.ng made changes -
        Attachment screenshot-3.jpg [ 10756 ]
        Hide
        yip.ng added a comment -

        Testing fix for tab alignment.

        Show
        yip.ng added a comment - Testing fix for tab alignment.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #15279 Thu Nov 29 15:23:53 MST 2007 yip.ng ICE-2302
        Fixed alignment of upper left tab.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/core/src/com/icesoft/faces/resources/css/xp/xp-portlet.css
        yip.ng made changes -
        Attachment screenshot-2.jpg [ 10755 ]
        Hide
        yip.ng added a comment -

        Testing fix for class and type attribute values.

        Show
        yip.ng added a comment - Testing fix for class and type attribute values.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #15274 Thu Nov 29 12:08:40 MST 2007 yip.ng ICE-2302
        Added type attribute to input field.
        Fixed value of class attribute when there are portlet classes included.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/ext/taglib/Util.java
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/selectinputdate/SelectInputDateRenderer.java
        Ken Fyten made changes -
        Fix Version/s 1.7DR#3 [ 10112 ]
        Assignee Yip Ng [ yip.ng ]
        Hide
        Neil Griffin added a comment -

        I have a fix for problem #2 above with the wierd font in FireFox:

        When I added this with FireBug:

        type="text"

        Then Firefox FINALLY applied the Liferay style. It might have something to do with the fact that ICEfaces renders this <input> inside a <div> or something... I don't know.

        In order to fix this programmatically, add the following code on or about line 180 of SelectInputDateRenderer.encodeEnd():

        dateText.setAttribute(HTML.TYPE_ATTR, "text");

        Show
        Neil Griffin added a comment - I have a fix for problem #2 above with the wierd font in FireFox: When I added this with FireBug: type="text" Then Firefox FINALLY applied the Liferay style. It might have something to do with the fact that ICEfaces renders this <input> inside a <div> or something... I don't know. In order to fix this programmatically, add the following code on or about line 180 of SelectInputDateRenderer.encodeEnd(): dateText.setAttribute(HTML.TYPE_ATTR, "text");
        Hide
        Neil Griffin added a comment -

        Regarding the wierd font thing, there are actually two problems that we're dealing with:

        1) The problem I mention above, where the word "Input" is appended
        2) A bug in Firefox, whereby the following code in the Liferay theme is not being applied:

        input[type="text"], input[type="password"], input[type="file"],input[type="submit"], input[type="button"], input[type="reset"], select, textarea, .textarea

        { font: 1em 'Tahoma','Lucida Sans Unicode','Lucida Grande','Lucida',Arial,Verdana,sans-serif; }

        Firefox SHOULD apply to the HTML <input> field that is rendered by SelectInputDateRenderer.java BUT Firefox does not do it.

        Show
        Neil Griffin added a comment - Regarding the wierd font thing, there are actually two problems that we're dealing with: 1) The problem I mention above, where the word "Input" is appended 2) A bug in Firefox, whereby the following code in the Liferay theme is not being applied: input [type="text"] , input [type="password"] , input [type="file"] ,input [type="submit"] , input [type="button"] , input [type="reset"] , select, textarea, .textarea { font: 1em 'Tahoma','Lucida Sans Unicode','Lucida Grande','Lucida',Arial,Verdana,sans-serif; } Firefox SHOULD apply to the HTML <input> field that is rendered by SelectInputDateRenderer.java BUT Firefox does not do it.
        Neil Griffin made changes -
        Field Original Value New Value
        Attachment screenshot-1.jpg [ 10719 ]
        Hide
        Neil Griffin added a comment -

        This screenshot has red circles around the problem renderings.

        Show
        Neil Griffin added a comment - This screenshot has red circles around the problem renderings.
        Neil Griffin created issue -

          People

          • Assignee:
            Unassigned
            Reporter:
            Neil Griffin
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: