ICEfaces
  1. ICEfaces
  2. ICE-10420

Add "50%-split" positioning to mobi:fieldsetRow component

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 4.0
    • Fix Version/s: EE-4.0.0.GA, 4.1
    • Component/s: MOBI-Components
    • Labels:
      None
    • Environment:
      ICEfaces 4
    • Assignee Priority:
      P2

      Description

      In ICEmobile 1.3, the mobi:fieldSetRow, when used with one of the mobile platform CSS themes (such as iPad mini), would automatically position the label and input fields inside a mobi:fieldSetRow giving each approx. 50% of the width available.

      Since the IF4 mobi components now longer support those mobile device themes, this behaviour has been lost. This JIRA is to consider adding this feature back, either by including it the structural CSS of the mobi:fieldSetRow component, or possibly via a new custom ThemeRoller theme?
      1. browser.PNG
        19 kB
      2. iphone4s.png
        55 kB
      3. noDeviceResource.png
        44 kB
      4. screenshot-ice10420-1.jpg
        146 kB
      5. width-screenshot.png
        18 kB

        Activity

        Hide
        Arturo Zambrano added a comment -

        r44076: added special styling to center buttons.

        Buttons now appear at the center, one on top of the other (vertically), if there are more then one.

        This styling applies specifically to <input> elements of type 'button' and 'submit', to <button> elements, to all 8 bridgeit button components (mobi:camcorder, mobi:camera, mobi:cloudPush, mobi:fetchContact, mobi:geoTrack, mobi:microphone, mobi:scan, and mobi:sms), and to four ACE button components (ace:checkboxButton, ace:linkButton, ace:pushButton, and ace:radioButton).

        Show
        Arturo Zambrano added a comment - r44076: added special styling to center buttons. Buttons now appear at the center, one on top of the other (vertically), if there are more then one. This styling applies specifically to <input> elements of type 'button' and 'submit', to <button> elements, to all 8 bridgeit button components (mobi:camcorder, mobi:camera, mobi:cloudPush, mobi:fetchContact, mobi:geoTrack, mobi:microphone, mobi:scan, and mobi:sms), and to four ACE button components (ace:checkboxButton, ace:linkButton, ace:pushButton, and ace:radioButton).
        Hide
        Arturo Zambrano added a comment -

        It's still debatable if button components should have this special styling as well (align them to the right), since in our apps, we've been placing either a single button or a group of buttons in the same fieldSet row, as can be seen in the screenshots attached to ICE-10476, so this styling will cause that all or one of those buttons in the row be aligned to the right, while there's nothing to the left of them.

        Show
        Arturo Zambrano added a comment - It's still debatable if button components should have this special styling as well (align them to the right), since in our apps, we've been placing either a single button or a group of buttons in the same fieldSet row, as can be seen in the screenshots attached to ICE-10476, so this styling will cause that all or one of those buttons in the row be aligned to the right, while there's nothing to the left of them.
        Hide
        Arturo Zambrano added a comment -

        r44046: moved open/close button inside the root node of mobi:dateSpinner and mobi:timeSpinner when in non-native mode; adjusted special styling on mobile devices for these
        r44048: added style class names to root nodes of ace:autoCompleteEntry and ace:sliderEntry
        r44049: added special styling for ace:autoCompleteEntry, ace:comboBox, ace:selectMenu and ace:sliderEntry

        Show
        Arturo Zambrano added a comment - r44046: moved open/close button inside the root node of mobi:dateSpinner and mobi:timeSpinner when in non-native mode; adjusted special styling on mobile devices for these r44048: added style class names to root nodes of ace:autoCompleteEntry and ace:sliderEntry r44049: added special styling for ace:autoCompleteEntry, ace:comboBox, ace:selectMenu and ace:sliderEntry
        Hide
        Ken Fyten added a comment -

        Let's go ahead have it at least position the buttons and ace:select*, ace:autoComplete, etc. components so that the they are left-aligned with the other components, and let the width be determined as usual in those cases.

        Show
        Ken Fyten added a comment - Let's go ahead have it at least position the buttons and ace:select*, ace:autoComplete, etc. components so that the they are left-aligned with the other components, and let the width be determined as usual in those cases.
        Hide
        Arturo Zambrano added a comment -

        44043: committed styling fixes specific for certain components to appear right-aligned and using 50% of the available width on non-desktop environments.

        After seeing the issues reported above and the issues reported in ICE-10476 and seeing how components are being used inside mobi:fieldSet rows, it is no longer the aim of this JIRA to modify the styling of ALL components that appear at the end of a field set row. The fixes just committed only affect the components that make the most sense to be used in mobile environments in this fashion, which are all standard h: components that render either an <input>, <textarea> or <select> element as their root/only node, ace:textEntry, ace:textareaEntry, ace:maskedEntry, ace:simpleSelectOneMenu, mobi:flipswitch, mobi:dateSpinner, and mobi:timeSpinner.

        The above was determined after surveying all ACE and MOBI components. All other components are simply not very likely to be used inside a mobifieldSet row with the intention to occupy the right 50% of the area, such as container components, buttons, data components, utility components, and other complex components like ace:gMap and ace:chart. The only components that still make sense to be used in this fashion but weren't included in the fixes above are ace:autoCompleteEntry, ace:comboBox, ace:selectMenu and ace:slider. The issue with these components is that they have their own 'width' or 'length' attributes, so their widths cannot be easily modified by general CSS classes only.

        A CSS class was also added to this mobile stylesheet (that is only loaded on non-desktop environments when having mobi:deviceResource on the page) that users can add arbitrarily to other components to make them align to the right when inside a mobi:fieldSet row. This class is 'mobi-float-right'.

        The only remaining issue is that when using this mobile stylesheet, the mobi:dateSpinner and mobi:timeSpinner components will have the popup button to the left when being in the non-native mode. This is due to the way in which the markup for these components in rendered, and can be fixed by changing the current way of rendering this markup.

        Show
        Arturo Zambrano added a comment - 44043: committed styling fixes specific for certain components to appear right-aligned and using 50% of the available width on non-desktop environments. After seeing the issues reported above and the issues reported in ICE-10476 and seeing how components are being used inside mobi:fieldSet rows, it is no longer the aim of this JIRA to modify the styling of ALL components that appear at the end of a field set row. The fixes just committed only affect the components that make the most sense to be used in mobile environments in this fashion, which are all standard h: components that render either an <input>, <textarea> or <select> element as their root/only node, ace:textEntry, ace:textareaEntry, ace:maskedEntry, ace:simpleSelectOneMenu, mobi:flipswitch, mobi:dateSpinner, and mobi:timeSpinner. The above was determined after surveying all ACE and MOBI components. All other components are simply not very likely to be used inside a mobifieldSet row with the intention to occupy the right 50% of the area, such as container components, buttons, data components, utility components, and other complex components like ace:gMap and ace:chart. The only components that still make sense to be used in this fashion but weren't included in the fixes above are ace:autoCompleteEntry, ace:comboBox, ace:selectMenu and ace:slider. The issue with these components is that they have their own 'width' or 'length' attributes, so their widths cannot be easily modified by general CSS classes only. A CSS class was also added to this mobile stylesheet (that is only loaded on non-desktop environments when having mobi:deviceResource on the page) that users can add arbitrarily to other components to make them align to the right when inside a mobi:fieldSet row. This class is 'mobi-float-right'. The only remaining issue is that when using this mobile stylesheet, the mobi:dateSpinner and mobi:timeSpinner components will have the popup button to the left when being in the non-native mode. This is due to the way in which the markup for these components in rendered, and can be fixed by changing the current way of rendering this markup.

          People

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

            Dates

            • Created:
              Updated:
              Resolved: