Results 1 to 5 of 5

Thread: When zooming to 90% in Chrome, controls lose their margins - ExtJs 6.6.0 classic

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    257
    Answers
    4

    Default When zooming to 90% in Chrome, controls lose their margins - ExtJs 6.6.0 classic

    To reproduce, go to: http://examples.sencha.com/extjs/6.6...#form-register in Chrome (I used the Crisp theme), change the zoom to 90%. some of the margins disappear.

    Is there a way to prevent this?


    100%
    100_percent.PNG

    90%
    90_percent.PNG

    Thanks

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    900
    Answers
    105

    Default

    Browser zoom is not supported by ExtJS. You should prevent it.

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    257
    Answers
    4

    Default

    There seems to be no way to 100% prevent zooming for a desktop browser (at least zooming out). Also I do not want to prevent zooming in. I use it myself for some of the sites. Based on the research I've done Chrome has problems rendering borders that are 1px when going to a zoom level less than 100%. Some people recommended redefining these borders using "thin" instead of 1px.

  4. #4
    Sencha Premium Member matei's Avatar
    Join Date
    Jun 2008
    Location
    Cluj-Napoca
    Posts
    84
    Answers
    1

    Default

    some for me, but for zoom at 175% for some themes (triton), or 110% and each second some after for my theme, but still don't understand why...

    https://examples.sencha.com/extjs/6....#form-checkout (zoom at 175%) - only border bottom is not visible for some fields.

  5. #5
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    153
    Answers
    15

    Default

    Since browsers are responsible for rendering zoom factors this is difficult to control in the best case situations.

    You can use the W3C - CSS Device Adaption Module Level 1 (current state is Working Draft). It will be subject to change without notice and some changes may break what you implement.

    In this working draft you can set/control using 'zoom', 'min-zoom', 'max-zoom', 'user-zoom' and the 'orientation' descriptors to help control what users can do with zoom. Although this is moving forward in helping, no matter what you set you will be dependent upon how the browser decides to render it.
    Andy Allord
    Sencha MVP/Software Engineer

Similar Threads

  1. Replies: 5
    Last Post: 16 Jun 2017, 1:53 AM
  2. Replies: 1
    Last Post: 1 May 2013, 5:13 AM
  3. button lose focus style in Chrome
    By angelflaree in forum Ext 3.x: Help & Discussion
    Replies: 12
    Last Post: 3 Oct 2012, 2:34 AM
  4. Replies: 2
    Last Post: 2 Apr 2012, 6:07 AM
  5. [OPEN] Buggy tooltip heights when zooming in FF/Chrome
    By toolware in forum Ext:Bugs
    Replies: 2
    Last Post: 6 Sep 2011, 6:10 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •