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] InputAdornment shouldn't wrap

See original GitHub issue

start and end input adormants wraps long lines

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 🤔

start and end input adormants should not wraps long lines

Current Behavior 😯

long lines are wrapped Screen Shot 2019-04-07 at 7 10 24 PM

Steps to Reproduce 🕹

      <TextField
        margin="dense"
        type="number"
        name="price"
        InputProps={{
          startAdornment: <InputAdornment position="start">blah blah</InputAdornment>,
          endAdornment: <InputAdornment position="end">blah blah</InputAdornment>,
        }}
      />

Possible solution

add

whiteSpace: "nowrap"

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v3.9.2
React	16.8.2
Browser	chrome
TypeScript	-
etc.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:8 (6 by maintainers)

Top GitHub Comments

3reactions

TrejGuncommented, May 21, 2019

on this page google uses pretty long adorment “@gmail.com” https://material.io/design/components/text-fields.html#filled-text-field

1reaction

olisticcommented, Apr 29, 2019

Thanks for your suggestions. Overriding the InputAdornment’s root CSS with white-space: nowrap; did the trick for me.

Top Results From Across the Web

[TextField] InputAdornment shouldn't wrap #15240 - GitHub

I have searched the issues of this repository and believe that this is not a duplicate. Expected Behavior. start and end input adormants ......

InputAdornment should not wrap #15240 - Issuehunt

I have searched the issues of this repository and believe that this is not a duplicate. Expected Behavior. <!--- Describe what should happen....

React Material-UI TextInput with fixed text along with ...

I want to achieve the below UI for TextInput. It should have a fixed text at end along with a placeholder where the...

InputAdornment API - Material UI - MUI

API reference docs for the React InputAdornment component. Learn about the props, CSS, and other APIs of this exported module.

Material-UI | CSS Frameworks compare - Saravanakumar GN

... [TablePagination] Fix responsive display issue (#18668) @r3dm1ke; [TextField] InputAdornment shouldn't wrap (#18641) @TrejGun; [l10n] Add Polish ...