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

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              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
              Permalink
              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
              Permalink
              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
              Permalink
              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
              Permalink
              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: