WinJS - rating control renders weirdly in Firefox -
i'm trying out winjs following tutorial on official page here. unlike ie11 , chrome on firefox 40.0.2 goes wrong - second star in rating control rendered either invisible or partially visible.
i simplified example , replicated issue in jsfiddle can't figure out causes problem, since when tried remove different parts of css , html magically disappeared wasn't wanted:
- adding rating control results in preceeding control render incorrectly, though other fine.
- removing css hides parts of html made rating render well.
i couldn't replicate issue without mess. sorry.
i guess it's winjs bug, then, why or how can prevent in future , there workaround?
the code
html
<div id="app" class="show-home win-type-body"> <!-- split view --> <div class="splitview" data-win-control="winjs.ui.splitview"> <!-- pane area --> <div> <div class="header"> <button class="win-splitviewpanetoggle" data-win-control="winjs.ui.splitviewpanetoggle" data-win-options="{ splitview: select('.splitview') }" ></button> <div class="title"><h2 class="win-h2">all trails</h2></div> </div> <div class="nav-commands"> <div data-win-control="winjs.ui.splitviewcommand" data-win-options="{ label: 'home', icon: 'home', oninvoked: mysplitview.homeclicked }"></div> <div data-trail-id="0" data-win-control="winjs.ui.splitviewcommand" data-win-options="{ label: 'snoqualmie falls trail', icon: 'mappin', oninvoked: mysplitview.trailclicked}"></div> <div data-trail-id="1" data-win-control="winjs.ui.splitviewcommand" data-win-options="{ label: 'foster island trail', icon: 'mappin', oninvoked: mysplitview.trailclicked}"></div> <div data-trail-id="2" data-win-control="winjs.ui.splitviewcommand" data-win-options="{ label: 'alki trail', icon: 'mappin', oninvoked: mysplitview.trailclicked}"></div> </div> </div> <!-- content area --> <div class="contenttext"> <div class="trail-ui"> <!-- trail description --> <div class="description"> <!-- title, location , description injected each hiking page --> <h2 class="trail-title"></h2> <p class="trail-location"></p> <p class="trail-description" id="description-content"></p> <!--rating--> <table> <tr class="detail"> <td>rate trail: </td> <td class="control"> <div class="rating" data-win-control="winjs.ui.rating" data-win-options="{averagerating: 3.4}"></div> </td> </tr> </table> <!--end rating--> </div> </div> <!-- closes trail-ui--> <div class="home-ui"> <h2 class = "win-h2">home page</h2> </div> </div> </div>
javascript
(function () { //split view var mysplitview = window.mysplitview = { splitview: null, trailclicked: winjs.ui.eventhandler(function (ev) { var trailid = ev.currenttarget.dataset.trailid; updateui(alltrails[trailid]); }), homeclicked: winjs.ui.eventhandler(function (ev) { //the home button has been clicked document.getelementbyid("app").classlist.add("show-home"); document.getelementbyid("app").classlist.remove("show-trail"); }), }; //end split view function updateui(trail) { //add remove tags document.getelementbyid("app").classlist.add("show-trail"); document.getelementbyid("app").classlist.remove("show-home"); //update title var titleelt = document.body.queryselector(".trail-title"); titleelt.textcontent = trail.title; //update location var locationelt = document.body.queryselector(".trail-location"); locationelt.textcontent = trail.location; //update description var descriptionelt = document.body.queryselector(".trail-description"); descriptionelt.textcontent = trail.description; //update rating var ratingelt = document.body.queryselector(".rating"); ratingelt.wincontrol.averagerating = trail.averagerating; ratingelt.wincontrol.userrating = 0; } var alltrails = [ { title: "snoqualmie falls trail", averagerating: 2, location: "kirkland, wa", description: "snoqualmie falls 1 of washington state's popular scenic attractions. more 1.5 million visitors come falls every year. @ falls, find two-acre park, gift shop, observation deck, salish lodge , famous 270 foot waterfall." }, { title: "foster island trail", averagerating: 4.5, location: "bellevue, wa", description: "foster island trail 2 mile loop trail located near seattle, washington features lake , skill levels. trail offers number of activity options , accessible year-round." }, { title: "alki trail", averagerating: 1.5, location: "seattle, wa", description: "the alki trail rides along northern , eastern shore of west seattle along alki avenue. largely riding on widened sidewalk, separated traffic parking lane , curb, traffic on trail separated bikes , walkers, providing less stressful experience walkers , bikers alike. " } ] //processall winjs.ui.processall(); })();
css
body { font-family: 'segoe ui', sans-serif; height: 100%; } .content, #app { height: 100%; } /* splitview pane content style*/ #app .header { white-space: nowrap; } #app .title { display: inline-block; } .show-trail .home-ui { display: none; } .show-home .trail-ui { display: none; }
Comments
Post a Comment