Page 1 of 3 123 LastLast
Results 1 to 10 of 26

Thread: Text field heights are incorrect, and text is misaligned, in Chrome 56

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-23628 in 6.5.1.
  1. #1
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default Text field heights are incorrect, and text is misaligned, in Chrome 56

    Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1p59

    Possibly relevant Chromium bug (wontfix): https://bugs.chromium.org/p/chromium...tail?id=682166

    Looks like Chrome 56 has changed how it handles percentage heights on tables. This causes text fields in Ext JS to expand larger than their specified height when the wrapper is more than one line (e.g. if the field label is long enough to wrap). This behaviour now differs from Chrome 55, IE11, Edge 13 and Firefox 50.

    It also looks like a similar issue in Firefox was fixed in EXTJS-13752, based on comments in Text.scss in theme-base. I've tried applying the same fix (table => flex) to Chrome, but it didn't seem to have any effect. Removing the height: 100% on the trigger-wrap works, but also breaks textareas in the process.

    Another side effect is the text is now misaligned. It looks like removing the webkit-specific height: calc(100% + 3px) fixes the misalignment (but not the height expansion issue).

    Last edited by BobR; 1 Feb 2017 at 7:42 PM. Reason: Added bit about misaligned text back to title

  2. #2

    Default

    Bob - Want to make sure I know what you are trying to address here. Are you talking about the fields? or the labels? Could you flesh it out a bit more?


    Kevin Jackson
    Sencha Support Team

  3. #3
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default

    Sorry, I'm talking about the fields (inputEl/triggerWrap):

    textfieldheight.png

    Current versions of Edge, IE and Firefox all behave like Chrome 55. And I believe that to be more correct here, since field height is defined in scss.

    (ignore the chatter about misaligned text, apparently that doesn't repro on fiddle)

  4. #4
    Sencha User
    Join Date
    Jun 2009
    Location
    Heidelberg, Germany
    Posts
    78

    Default

    (ignore the chatter about misaligned text, apparently that doesn't repro on fiddle)
    Yes, it does repro on fiddle. To make the issue even more obvious, add allowBlank: false to one of the text fields and change the theme to classic. Enter and leave the field without entering text, so that the field is highlighted with a red border. You will notice that the swirly line that should be visible at the bottom of the field, is not visible.

    If you then apply your fix (removing the webkit specific height-setting), the line reappears. So this is part of the issue and it can be fixed as described.

    I have had no luck so far with the height issue, either.

  5. #5
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default

    Quote Originally Posted by kleins View Post
    Yes, it does repro on fiddle.
    Thanks. It was blatantly obvious on our custom theme, but we had adjusted heights. It looked alright on that fiddle above, so I thought it might've been just us.

    Quote Originally Posted by kleins View Post
    I have had no luck so far with the height issue, either.
    I've tentatively fixed it by setting height: initial; on :not(.x-form-textarea-body) > .x-form-trigger-wrap but that makes me uncomfortable. Would like to see a recommendation/workaround from Sencha, even if it's not a full fix/update yet.

  6. #6
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default

    Quote Originally Posted by Kevin Jackson View Post
    Could you flesh it out a bit more?
    Do you still need more info than what is in post #3 (screenshot)? @kleins has also described how to reproduce the text misalignment.

  7. #7

    Default

    Still looking into it. Did not see that on my machine. I am on a Mac. Will test on a PC in the morning.

    Kevin Jackson

  8. #8
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default

    Quote Originally Posted by Kevin Jackson View Post
    Still looking into it. Did not see that on my machine. I am on a Mac. Will test on a PC in the morning.
    I can reproduce on OS X 10.11.6, on Chrome 56. It doesn't happen on Safari 9.1.

    Also happens on macOS 10.12, Chrome 56. But not Safari 10 (so, either Chrome-specific or Safari simply hasn't updated yet).

  9. #9

    Default

    Just to clarify. You have mentioned Chrome and Chromium. Chrome should work (and does so far in my tests). Chromium is not something we test on or are certified to work on. I will continue to see if I can track it down.


    Kevin Jackson
    [i]Sencha Support Team[i]

  10. #10
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default

    Quote Originally Posted by Kevin Jackson View Post
    Chrome should work (and does so far in my tests).
    I've tested on the current official build (from Google) of Google Chrome 56 on Windows 7, Windows 10 and OS X 10.11.6. It fails on all of them. Across 4 different machines.

    It *does* work on Chrome 55, which some machines might not have updated from yet.

    Just to be clear, the two text fields in the window should be the same height. This is the case on every browser/OS combination I've tried, except Google Chrome 56, where the second one (with the long/wrapping label) has a greater height on the textbox itself than the first one.


    textfieldheighthighlighted.png

    I only mentioned Chromium as that is where the browser (wontfix) bug is tracked. We're not testing on Chromium, nor do we care about it as long as Chrome works. I'll edit the first post, sorry.

Page 1 of 3 123 LastLast

Similar Threads

  1. [DUP] Text in Text field selected when Empty text given
    By DieInHeaven in forum Ext JS 6.x Bugs
    Replies: 4
    Last Post: 7 Jul 2016, 11:01 PM
  2. Replies: 1
    Last Post: 20 Apr 2016, 2:41 PM
  3. [DUP] 5.1.1 Chrome 43 text field shifts downward after tab
    By The0s in forum Ext 5: Bugs
    Replies: 5
    Last Post: 8 Jun 2015, 5:00 AM
  4. [OPEN] Grid's text-field editor incorrect behavior
    By nbabinski in forum Ext:Bugs
    Replies: 2
    Last Post: 20 Sep 2013, 6:45 AM
  5. [4.0.7] Multi-line text sprite misaligned in SVG
    By dgottlieb in forum Ext:Bugs
    Replies: 1
    Last Post: 2 Dec 2011, 10:31 AM

Posting Permissions

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