Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout issue with TextFields in Material theme if width is less than 150 pixels #1650

fabriciomurta opened this issue Aug 28, 2019 · 1 comment


Copy link

commented Aug 28, 2019

Found: 5.0.0-preview
Ext.NET forum thread: New Theme Material Issue
Sencha thread: Material Theme incongruently limits minimum TextField width to 150px

TextField components' input field won't obey width if the component's total width is less than 150 pixels wide. There's a CSS rule in the theme that limits the width to 150 pixels at least.

The effect is that although the input element is painted on screen with fixed minimum 150 pixels, the component's limits obeys the box boundaries, giving the following results:

  • the field always displays at least 150 pixels wide
  • if there's any component to the right of the text field, the exceeding width of the field to the left will be drawn over the right component, overlapping the visual

By overriding the .x-form-text-field-body-default CSS rule to allow a smaller min-width setting, the issue can be averted.

This issue may be inherent from the Material theme, which has been brought from Ext JS modern framework.


This comment has been minimized.

Copy link
Contributor Author

commented Sep 13, 2019

Fixed by setting the min-width of the affected CSS rule to 0px.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
1 participant
You can’t perform that action at this time.