ICEfaces
  1. ICEfaces
  2. ICE-2492

selectInputDate's popup button is wrapping when used in a container with a shorter width

          Details

          • Type: Improvement Improvement
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: 1.6.2
          • Fix Version/s: 1.7DR#3
          • Component/s: ICE-Components
          • Labels:
            None
          • Environment:
            n/a

            Description

            The calendar's popup button will wrap to the next line when the component is placed within a container whose width is less than the selectInputDate's text input + button width. We should set a min-width attribute on the container div to about 170px.
            1. screenshot-1.jpg
              140 kB
            2. screenshot-2.jpg
              140 kB
            3. screenshot-3.jpg
              165 kB
            4. screenshot-4.jpg
              210 kB

              Issue Links

              is duplicated by

              Bug - A problem which impairs or prevents the functions of the product. ICE-2455 InputDate control It is not aligned when the space is not enough.

              • Major - Major loss of function.
              • Closed

                Activity

                Ascending order - Click to sort in descending order
                Hide
                Permalink
                yip.ng added a comment -

                Screenshot showing the problem.

                Show
                yip.ng added a comment - Screenshot showing the problem.
                Hide
                Permalink
                yip.ng added a comment -

                Screenshot of the fix.

                Show
                yip.ng added a comment - Screenshot of the fix.
                Hide
                Permalink
                yip.ng added a comment -

                How to test:

                In component-showcase\web\css\showcase_style.css, change the width of .calBorderHighlight to below 170px. See the attached screenshots for test results before and after the fix.

                Show
                yip.ng added a comment - How to test: In component-showcase\web\css\showcase_style.css, change the width of .calBorderHighlight to below 170px. See the attached screenshots for test results before and after the fix.
                Hide
                Permalink
                yip.ng added a comment -

                From Mark:

                I don't think that the change to SelectInputDateRenderer, where you set
                the style on the SelectInputDate, is what we should do. It breaks the
                ability to use ValueBindings to dynamically give different styles.

                Show
                yip.ng added a comment - From Mark: I don't think that the change to SelectInputDateRenderer, where you set the style on the SelectInputDate, is what we should do. It breaks the ability to use ValueBindings to dynamically give different styles.
                Hide
                Permalink
                yip.ng added a comment -

                Screenshot before fix.

                Show
                yip.ng added a comment - Screenshot before fix.
                Hide
                Permalink
                yip.ng added a comment -

                Screenshot after fix.

                Show
                yip.ng added a comment - Screenshot after fix.
                Hide
                Permalink
                yip.ng added a comment -

                How to test:

                In component-showcase\web\inc\components\selectInputDate.jspx, change the width of the containing div of the popup calendar to below 170px:

                <ice:panelGroup styleClass="formBorderHighlight" style="float: left; width:169px;">

                See the attached screenshots for the test results before and after the fix.

                Show
                yip.ng added a comment - How to test: In component-showcase\web\inc\components\selectInputDate.jspx, change the width of the containing div of the popup calendar to below 170px: <ice:panelGroup styleClass="formBorderHighlight" style="float: left; width:169px;"> See the attached screenshots for the test results before and after the fix.

                  People

                  • Assignee:
                    yip.ng
                    Reporter:
                    Philip Breau
                  • Votes:
                    0 Vote for this issue
                    Watchers:
                    0 Start watching this issue

                    Dates

                    • Created:
                      Updated:
                      Resolved: