question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextField styling has changed

See original GitHub issue

The TextField is acting differently in v3.1.1 compared to prior versions. Look at the downshift > Select multiple countries example:

screen shot 2018-09-24 at 23 55 52

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would expect the TextField to be to the right of the chips and we wrapped only if it doesn’t fit to the right anymore.

Current Behavior

The TextField is wrapped on a second line after a first selection.

Steps to Reproduce

Link: https://material-ui.com/demos/autocomplete/

  1. Go to the downshift example
  2. Select a country in the second input field

Context

Visually broke the multi-select component.

Your Environment

Tech Version
Material-UI v3.1.1
Chrome v69

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:10 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
katzoocommented, Sep 25, 2018

3.1.1 also affects styling of outlined fields (with and without labels). password

textfield

https://material-ui.com/demos/text-fields/#outlined

1reaction
hashwincommented, Sep 25, 2018

In previous versions - or at least up through v3.0.1 - the alignment is fine. I’m also using Chrome v69.

It was fine in 3.1.0, but broken in 3.1.1

keep_pipelines_as_trials_that_expire_unless_payment_begins

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to style material-ui textfield - Stack Overflow
My problem is that I can not seem to get the colour of the text field to change to white. I seem to...
Read more >
TextField styling has changed #12994 - mui/material-ui - GitHub
I retract my issue. It turned out I had some legacy CSS that was causing my issue -- likely due to CSS changes...
Read more >
Component Styling | Text Field | JET Developer Cookbook
Create a CSS class with the text field variables set to your preferred values. See the demo.css tab for details, and try changing...
Read more >
TextField API - Material UI - MUI
Name Type Default autoComplete string autoFocus bool false classes object
Read more >
Create and style a text field - Flutter documentation
TextField is the most commonly used text input widget. ... To retrieve the value when it changes, see the Handle changes to a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found