[TextField] conflicts with Bootstrap

[cadrimiranda]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When i use Bootstrap and MaterialUI, the Textfield with outlined variant and label with shrink props enter in conflicts with label style and the input show incorrect width of label inside the fieldset .

Expected Behavior 🤔

I want to use Bootstrap with MaterialUI in my project. In older versions, this does not happen (4.8.3 and under don't happen).

Steps to Reproduce 🕹

https://codesandbox.io/s/winter-meadow-219i9?fontsize=14&hidenavigation=1&theme=dark

Steps:

1. Install Material UI core and style
2. Install bootstrap
3. Import bootstrap css in index.jsx
4. Render the Textfield component

Context 🔦

My project design uses MaterialUI Components and Bootstrap and at the moment I can't remove the bootstrap or redesign my app to remove Material UI.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.0
React	v16.12.0
Browser	Chrome v79.0.3945.130 and Brave Version 1.2.43 Chromium: 79.0.3945.130
TypeScript	x
etc.	x

[homyden]

The problem appears not only with bootstrap. When I use sanitize.css in project, I have the same issue.

[cadrimiranda]

The problem appears not only with bootstrap. When I use sanitize.css in project, I have the same issue.

Please, make a example in codesandbox too

[homyden]

The problem appears not only with bootstrap. When I use sanitize.css in project, I have the same issue.

Please, make a example in codesandbox too

https://codesandbox.io/s/angry-sun-2ii0r

[grant-davidson]

This can be fixed by adding this to your css:

legend { width: auto }

https://codesandbox.io/s/lucid-dewdney-frre4

[homyden]

This can be fixed by adding this to your css:

legend { width: auto }

https://codesandbox.io/s/lucid-dewdney-frre4

replace label to "oooooo"

[cadrimiranda]

This can be fixed by adding this to your css:

legend { width: auto }

https://codesandbox.io/s/lucid-dewdney-frre4

This can solve, but with the label in uppercase this doesn't work. This is my case, take a look:

[oliviertassinari]

While this is an important issue to take care of to enable progressive migration from Bootstrap to Material-UI, I'm wondering.

What are the use cases for using Material-UI with Bootstrap outside legacy considerations? :)

[cadrimiranda]

While this is an important issue to take care of to enable progressive migration from Bootstrap to Material-UI, I'm wondering.

What are the use cases for using Material-UI with Bootstrap outside legacy considerations? :)

We are developing a system with a deadline we cant go back and refact our code. The material part (Textfield and Grid) is minor than bootstrap (system grid)(and we have a lot of forms). I guess i will refactor input component to imitation of materialUI textfield haha

[oliviertassinari]

@cadrimiranda in this context, you can either revert to the previous release of Material-UI until we release a patch, wait for a patch, or go ahead with proposing a pull request to patch that we will release later this week.

However, it doesn't answer the question regarding the motivation for using both :).

[cadrimiranda]

@oliviertassinari this can answer:

We are developing a system with a deadline we cant go back and refact our code.

In addition, in the initial phase of the project, we only used the bootstrap and the user interface / UX design left the organization and come another with the idea of ​​using Material Design and he proposed a new design. We liked it a lot and we are now using.

[homyden]

Issue appears with another css libraries.

sanitize.css

normilize.css

[Eplumecocq]

@homyden I'm facing the same issue with normilize.css. Removing it seems to fix the problem for me, but this is definitely not the best solution.

[cadrimiranda]

Thanks @homyden to find another use cases. Tonight i guess i'll fork the repository and try to fix this ...

[homyden]

Thanks @homyden to find another use cases. Tonight i guess i'll fork the repository and try to fix this ...

You are welcome! =)

In version 4.8.3, textfield had a bug related to the label in the outline variant. If you use texfield in tabs for example. It has been fixed in this commit. And then changed transitions.

So, need to find out how another css libraries affect these changes

Sorry for my broken English =)

[oliviertassinari]

normilize.css

It's a duplicate of #19386.

sanitize.css

It was fixed in #19389.

bootstrap

@grant-davidson has shared a solution. So I would suggest the following:

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
index 9a339d0c9..1b474382d 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -34,7 +34,8 @@ export const styles = theme => {
     },
     /* Styles applied to the legend element. */
     legendLabelled: {
-      display: 'block',
+      display: 'block', // Fix conflict with normalize.css and sanitize.css
+      width: 'auto', // Fix conflict with bootstrap
       textAlign: 'left',
       padding: 0,
       height: 11, // sync with `lineHeight` in `legend` styles

@cadrimiranda Do you want to submit a pull request? :)

[cadrimiranda]

@oliviertassinari i'll, thanks.

[adrijshikhar]

in bootstrap 5, doing this worked

legend {
  float: unset;
}

let me know if it works for you

[oliviertassinari]

@adrijshikhar Do you see it displayed like this with Bootstrap v5?

[adrijshikhar]

@adrijshikhar Do you see it displayed like this with Bootstrap v5?

Yes

[oliviertassinari]

@adrijshikhar Ok, no objection to fix it in the NotchedOutlined directly, but I'm not sure we should care a lot either.

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
index c690dedc37..50d2ee71d1 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -20,6 +20,7 @@ const NotchedOutlineRoot = experimentalStyled('fieldset')({
 });

 const NotchedOutlineLegend = experimentalStyled('legend')(({ styleProps, theme }) => ({
+  float: 'unset', // Fix conflict with bootstrap
   ...(styleProps.label === undefined && {
     padding: 0,
     lineHeight: '11px', // sync with `height` in `legend` styles
@@ -29,8 +30,8 @@ const NotchedOutlineLegend = experimentalStyled('legend')(({ styleProps, theme }
     }),
   }),
   ...(styleProps.label !== undefined && {
-    display: 'block',
-    width: 'auto',
+    display: 'block', // Fix conflict with normalize.css and sanitize.css
+    width: 'auto', // Fix conflict with bootstrap
     padding: 0,
     height: 11, // sync with `lineHeight` in `legend` styles
     fontSize: '0.75em',

[superior57]

the problem is same for me too. Is there any solution?

[oliviertassinari]

@talentedexpert0057 If you are seeing this issue https://github.com/mui-org/material-ui/issues/19463#issuecomment-836810493 feel free to submit a PR with the fix proposed.

[kuntal-ghosh]

@adrijshikhar Do you see it displayed like this with Bootstrap v5?

Yes

I am watching this issue in my codebase. how to solve this in my codebase? thank you.

[ciradu2204]

Hi, I am working on it

[ChrisClaude]

Hi, I am working on this issue.

[abdulmunimx63]

@adrijshikhar Do you see it displayed like this with Bootstrap v5?

Yes

I am watching this issue in my codebase. how to solve this in my codebase? thank you.

Use the following property: legend { float: unset; }

[aaarichter]

@homyden the normalize.css screen you showed in https://github.com/mui/material-ui/issues/19463#issuecomment-580277018 actually happens with Safari 15 on mui.com

[michaldudak]

This has been reported already in #31367