ICEmobile
  1. ICEmobile
  2. MOBI-527

JSP TabSet not rendering widths on tabs

    Details

    • Type: Bug Bug
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.1 Final
    • Fix Version/s: 1.2 Beta
    • Component/s: Faces
    • Labels:
      None
    • Environment:
      n/a

      Description

      The JSP tabset is not rendering the calculated widths on the tabs.

        Activity

        Hide
        Philip Breau added a comment - - edited

        JSP tabs render:
        <div class="mobi-tabset-tabs ">
        ----<ul>
        --------<li style="width:33%;" class="activeTab">Ice Sailer</li>
        --------<li style="width:33%;">Ice Breaker</li>
        --------<li style="width:34%;">Ice Skater</li>
        ----</ul>
        </div>

        JSP tabs render:
        <div class="mobi-tabset-tabs">
        ----<ul data-current="0">
        --------<li id="tabsetOnetab_0" class="activeTab" onclick="ice.mobi.tabsetController.showContent('tabsetOne', this,

        {tIndex: 0}

        );"><span class="mobitab">Desktop</span></li>
        --------<li id="tabsetOnetab_1" onclick="ice.mobi.tabsetController.showContent('tabsetOne', this,

        {tIndex: 1}

        );"><span class="mobitab">Mobile</span></li>
        --------<li id="tabsetOnetab_2" onclick="ice.mobi.tabsetController.showContent('tabsetOne', this,

        {tIndex: 2}

        );"><span class="mobitab">Ultra Mobile</span></li>
        ----</ul>
        </div>

        was:
        The JSP tabset is not rendering the calculated widths on the tabs.

        Show
        Philip Breau added a comment - - edited JSP tabs render: <div class="mobi-tabset-tabs "> ----<ul> --------<li style="width:33%;" class="activeTab">Ice Sailer</li> --------<li style="width:33%;">Ice Breaker</li> --------<li style="width:34%;">Ice Skater</li> ----</ul> </div> JSP tabs render: <div class="mobi-tabset-tabs"> ----<ul data-current="0"> --------<li id="tabsetOnetab_0" class="activeTab" onclick="ice.mobi.tabsetController.showContent('tabsetOne', this, {tIndex: 0} );"><span class="mobitab">Desktop</span></li> --------<li id="tabsetOnetab_1" onclick="ice.mobi.tabsetController.showContent('tabsetOne', this, {tIndex: 1} );"><span class="mobitab">Mobile</span></li> --------<li id="tabsetOnetab_2" onclick="ice.mobi.tabsetController.showContent('tabsetOne', this, {tIndex: 2} );"><span class="mobitab">Ultra Mobile</span></li> ----</ul> </div> was: The JSP tabset is not rendering the calculated widths on the tabs.
        Hide
        Judy Guglielmin added a comment - - edited

        implemented the autoWidth and checked in updated example. Looks great in large view but must be some application css that is causing the tabs to wrap around on small view .
        may have to review css of either app or component to ensure this attribute renders correctly. Please let me know if this is not the case (on this jira) and re-assign to me if I am missing something. Implemented in javascript for now until core rendering is done and then will see if there is a way using tag class.

        Show
        Judy Guglielmin added a comment - - edited implemented the autoWidth and checked in updated example. Looks great in large view but must be some application css that is causing the tabs to wrap around on small view . may have to review css of either app or component to ensure this attribute renders correctly. Please let me know if this is not the case (on this jira) and re-assign to me if I am missing something. Implemented in javascript for now until core rendering is done and then will see if there is a way using tag class.
        Hide
        Philip Breau added a comment - - edited

        We have MOBI-530 for autoWidth being incompatible with large view themes, if the original bug for this is fixed, please close

        Show
        Philip Breau added a comment - - edited We have MOBI-530 for autoWidth being incompatible with large view themes, if the original bug for this is fixed, please close
        Hide
        Judy Guglielmin added a comment - - edited

        implemented width for style on the list element. (similar to jsf but in js)
        Problem in android stock browser and container (small device) so had to use 98% as there seems to be some padding or margin coming in from somewhere in the spring application that is not in the jsf, although I checked and double-checked all the styles. This will be resolved when go to common core rendering for this component. All other devices and desktop browsers appear good though with this modification.

        Show
        Judy Guglielmin added a comment - - edited implemented width for style on the list element. (similar to jsf but in js) Problem in android stock browser and container (small device) so had to use 98% as there seems to be some padding or margin coming in from somewhere in the spring application that is not in the jsf, although I checked and double-checked all the styles. This will be resolved when go to common core rendering for this component. All other devices and desktop browsers appear good though with this modification.
        Hide
        Philip Breau added a comment - - edited

        Revision: 32308
        Author: philip.breau
        Date: November-22-12 3:26:58 PM
        Message:
        MOBI-527 JSP TabSet not rendering widths on tabs

        • update css
        • fix js not using remainder (was checking for index that didn't exist)
        • return js to dividing by 100

          Modified : /icemobile/trunk/icemobile/jsp/src/main/javascript/icemobile.js
          Modified : /icemobile/trunk/icemobile/resources/themes/android/1_tabset_ext.css
          Modified : /icemobile/trunk/icemobile/resources/themes/iphone/1_tabset_ext.css

        Show
        Philip Breau added a comment - - edited Revision: 32308 Author: philip.breau Date: November-22-12 3:26:58 PM Message: MOBI-527 JSP TabSet not rendering widths on tabs update css fix js not using remainder (was checking for index that didn't exist) return js to dividing by 100 Modified : /icemobile/trunk/icemobile/jsp/src/main/javascript/icemobile.js Modified : /icemobile/trunk/icemobile/resources/themes/android/1_tabset_ext.css Modified : /icemobile/trunk/icemobile/resources/themes/iphone/1_tabset_ext.css

          People

          • Assignee:
            Philip Breau
            Reporter:
            Philip Breau
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: