[TextField] conflicts with Bootstrap #19463

cadrimiranda · 2020-01-29T13:04:53Z

The issue is present in the latest release.
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:

Install Material UI core and style
Install bootstrap
Import bootstrap css in index.jsx
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 · 2020-01-29T13:47:07Z

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

cadrimiranda · 2020-01-29T14:09:21Z

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 · 2020-01-29T14:30:29Z

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 · 2020-01-29T23:20:39Z

This can be fixed by adding this to your css:

legend {
width: auto
}

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

homyden · 2020-01-30T04:53:34Z

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 · 2020-01-30T10:42:05Z

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 · 2020-01-30T12:46:35Z

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 · 2020-01-30T13:07:37Z

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 · 2020-01-30T13:27:30Z

@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 · 2020-01-30T13:59:01Z

@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 · 2020-01-30T14:25:09Z

Issue appears with another css libraries.

sanitize.css

normilize.css

Eplumecocq · 2020-01-30T14:52:17Z

@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 · 2020-01-30T18:19:17Z

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

homyden · 2020-01-30T18:50:16Z

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 · 2020-01-30T22:34:51Z

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 · 2020-01-31T10:58:12Z

@oliviertassinari i'll, thanks.

adrijshikhar · 2021-05-10T14:45:03Z

in bootstrap 5, doing this worked

legend {
  float: unset;
}

let me know if it works for you

oliviertassinari · 2021-05-10T15:03:32Z

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

adrijshikhar · 2021-05-11T06:11:43Z

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

Yes

oliviertassinari · 2021-05-11T10:02:20Z

@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 · 2021-06-19T14:22:27Z

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

oliviertassinari · 2021-06-19T14:35:00Z

@talentedexpert0057 If you are seeing this issue #19463 (comment) feel free to submit a PR with the fix proposed.

kuntal-ghosh · 2021-06-22T06:03:41Z

@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 · 2021-06-22T09:07:08Z

Hi, I am working on it

ChrisClaude · 2021-09-28T21:43:38Z

Hi, I am working on this issue.

abdulmunimx63 · 2021-11-14T18:34:54Z

@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 · 2022-03-12T21:36:47Z

@homyden the normalize.css screen you showed in #19463 (comment) actually happens with Safari 15 on mui.com

michaldudak · 2022-03-14T07:48:24Z

This has been reported already in #31367

oliviertassinari added the component: text field This is the name of the generic UI component, not the React module! label Jan 29, 2020

oliviertassinari added bug 🐛 Something doesn't work priority: important This change can make a difference labels Jan 30, 2020

oliviertassinari removed the priority: important This change can make a difference label Jan 30, 2020

oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Jan 30, 2020

cadrimiranda mentioned this issue Jan 31, 2020

[TextField] Handle leaky global styles of Bootstrap #19495

Merged

1 task

oliviertassinari closed this as completed in #19495 Feb 1, 2020

oliviertassinari changed the title ~~Textfield conflicts with Bootstrap~~ [TextField] conflicts with Bootstrap May 11, 2021

oliviertassinari reopened this May 11, 2021

eps1lon assigned ciradu2204 Jun 30, 2021

mnajdova added OCD21 and removed good first issue Great for first contributions. Enable to learn the contribution process. labels Jun 30, 2021

oliviertassinari added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Jul 16, 2021

mnajdova added good first issue Great for first contributions. Enable to learn the contribution process. and removed ready to take Help wanted. Guidance available. There is a high chance the change will be accepted OCD21 labels Aug 24, 2021

mnajdova unassigned ciradu2204 Aug 24, 2021

ChrisClaude mentioned this issue Sep 29, 2021

[TextField] Fix bootstrap, normalize.css, sanitize.css conflicts #28674

Merged

michaldudak added a commit to ChrisClaude/material-ui that referenced this issue Oct 27, 2021

Merge remote-tracking branch 'upstream/master' into issue-mui#19463

0e828b0

michaldudak closed this as completed in #28674 Nov 5, 2021

michaldudak mentioned this issue Mar 14, 2022

[TextField] border breaks after clicking out of it in Safari #31367

Closed

2 tasks

trombipeti mentioned this issue Sep 13, 2022

[TextField] legend style conflicts with Bootstrap when no label is set #34298

Closed

2 tasks

ZeeshanTamboli mentioned this issue Sep 17, 2022

[TextField] Fix conflict with Bootstrap even when label is not defined #34343

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TextField] conflicts with Bootstrap #19463

[TextField] conflicts with Bootstrap #19463

cadrimiranda commented Jan 29, 2020 •

edited

homyden commented Jan 29, 2020

cadrimiranda commented Jan 29, 2020

homyden commented Jan 29, 2020

grant-davidson commented Jan 29, 2020

homyden commented Jan 30, 2020

cadrimiranda commented Jan 30, 2020 •

edited

oliviertassinari commented Jan 30, 2020

cadrimiranda commented Jan 30, 2020

oliviertassinari commented Jan 30, 2020 •

edited

cadrimiranda commented Jan 30, 2020

homyden commented Jan 30, 2020

Eplumecocq commented Jan 30, 2020

cadrimiranda commented Jan 30, 2020

homyden commented Jan 30, 2020

oliviertassinari commented Jan 30, 2020

cadrimiranda commented Jan 31, 2020

adrijshikhar commented May 10, 2021

oliviertassinari commented May 10, 2021

adrijshikhar commented May 11, 2021

oliviertassinari commented May 11, 2021 •

edited

superior57 commented Jun 19, 2021

oliviertassinari commented Jun 19, 2021

kuntal-ghosh commented Jun 22, 2021 •

edited

ciradu2204 commented Jun 22, 2021

ChrisClaude commented Sep 28, 2021 •

edited

abdulmunimx63 commented Nov 14, 2021

aaarichter commented Mar 12, 2022

michaldudak commented Mar 14, 2022

[TextField] conflicts with Bootstrap #19463

[TextField] conflicts with Bootstrap #19463

Comments

cadrimiranda commented Jan 29, 2020 • edited

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

homyden commented Jan 29, 2020

cadrimiranda commented Jan 29, 2020

homyden commented Jan 29, 2020

grant-davidson commented Jan 29, 2020

homyden commented Jan 30, 2020

cadrimiranda commented Jan 30, 2020 • edited

oliviertassinari commented Jan 30, 2020

cadrimiranda commented Jan 30, 2020

oliviertassinari commented Jan 30, 2020 • edited

cadrimiranda commented Jan 30, 2020

homyden commented Jan 30, 2020

Eplumecocq commented Jan 30, 2020

cadrimiranda commented Jan 30, 2020

homyden commented Jan 30, 2020

oliviertassinari commented Jan 30, 2020

cadrimiranda commented Jan 31, 2020

adrijshikhar commented May 10, 2021

oliviertassinari commented May 10, 2021

adrijshikhar commented May 11, 2021

oliviertassinari commented May 11, 2021 • edited

superior57 commented Jun 19, 2021

oliviertassinari commented Jun 19, 2021

kuntal-ghosh commented Jun 22, 2021 • edited

ciradu2204 commented Jun 22, 2021

ChrisClaude commented Sep 28, 2021 • edited

abdulmunimx63 commented Nov 14, 2021

aaarichter commented Mar 12, 2022

michaldudak commented Mar 14, 2022

cadrimiranda commented Jan 29, 2020 •

edited

cadrimiranda commented Jan 30, 2020 •

edited

oliviertassinari commented Jan 30, 2020 •

edited

oliviertassinari commented May 11, 2021 •

edited

kuntal-ghosh commented Jun 22, 2021 •

edited

ChrisClaude commented Sep 28, 2021 •

edited