locked
Best way to resize a WinJS control?

    Question

  • What's the best way to resize a WinJS control like SearchBox, WinJS.UI.Rating, etc.?

    I tried to alter individual CSS selectors but that gets very tedious and sometimes the results aren't that great. Then I found the CSS rule: "transform: scale(2)" and that did the trick, but the disadvantage with that rule is that it's hard to position the newly sized element since CSS doesn't recognize the element's new visual width/height.

    So what is the recommended way to resize native controls?

     

    Thursday, October 09, 2014 4:34 PM

All replies

  • CSS is the best way to custom wins control UI. You can describe your scenario in detail in new thread for more information.
    Friday, October 10, 2014 11:54 PM
  • Let's take one example at a time. How would you resize the rating control: i.e. WinJS.UI.Rating?

    <div class="ratingControl" data-win-control="WinJS.UI.Rating"></div>

    Tuesday, October 14, 2014 1:25 AM
  • I'm in the same dilemma as you are, so I tried an approach with LESS creating some media queries that allow you to create a responsive design.

    The problem is that I'm not able to find an official document or source that helps you to create the correct values for the media queries for all supported screen resolutions on windows phone 8.1, so I took Blend's display list as base to create them.

    This are the media queries that I've create, so far they work fine on all the emulators the problem comes when you open the blend designer on the display 540 X 960 (qHD) the css classes get confused and sets the 480 x 800 styles.

    //Portrait
    @scala-120p: ~" (min-width: 399px) and (max-height: 666.7px)";
    @scala-140p: ~" (min-width: 514px) and (min-height: 912px)";
    @scala-180p: ~" (max-width: 400px) and (min-height: 710px)";
    @scala-200p: ~" (max-width: 385px) and (max-height: 641px)";
    @scala-220p: ~" (max-width: 491px) and (min-height: 872px)";
    @scala-240p: ~" (min-width: 449px) and (max-height: 800px)";
    
    //Landscape
    @scala-120l: ~" (max-width: 666.7px) and (min-height: 400px)";
    @scala-140l: ~" (min-width: 914px) and (min-height: 514px)";
    @scala-180l: ~" (min-width: 711px) and (max-height: 401px)";
    @scala-200l: ~" (max-width: 641px) and (max-height: 385px)";
    @scala-220l: ~" (max-width: 873px) and (min-height: 490px)";
    @scala-240l: ~" (min-width: 800px) and (max-height: 450px)";

    If you find a better solution please share.

    Friday, November 21, 2014 3:33 AM