Fluentui: Here is how to fix the textfield Prefix+Suffix issues in IE (misaligned and overlapped due to flex)

[frevds]

_In case this is still open (appears to be in my version (I'm using whatever version comes with SPFx 1.8.0 in SharePoint Online)). It also appears to be when I look at the demo at https://developer.microsoft.com/en-us/fabric#/components/textfield using IE (scroll down to prefixed and suffixed fields) _

In Internet Explorer 11, the prefix and suffix parts in Textfields appear misaligned with the text and can overlap the text if not enough horizontal space is available.
IE seems to have problems with padding and margins in when nesting display:flex elements.
Both the ms-TextField-fieldGroup and the ms-TextField-prefix have display:flex.

There is an easy solution to it, which works cross-browser.
Here is my SASS to fix it:

/* Flex calculation is buggy in IE when having flex containers with paddings/margins within flex containers, noticable in Fabric text fields with prefix or suffix parts, fix: */ .ms-TextField-prefix, .ms-TextField-suffix { display: table; /* instead of flex */ height: 100%; /* to vertically align text child */ box-sizing: border-box; /* to include any padding in the 100% height */ &>span { display: table-cell; vertical-align: middle; padding:0; } /* align text */ }

Maybe something like this can be adopted in Fabric to support prefix and suffix labels in IE as well.

[khmakoto]

Hi @frevds, thank you for this suggestion!

@micahgodbolt @dzearing @ecraig12345 would we want to implement TextField in this way to deal with the prefix/suffix bug?

[micahgodbolt]

All this needed was flex-shrink: 0. Looks like IE11 calculates the flex basis of an input differently than other browsers, so it was crowding the prefix/suffix out. flex-shrink will keep them from getting any smaller than the text inside of them.

[frevds]

Oha, nice @micahgodbolt, that's much simpler than using another display mode and seems to work the same way in low horizonal space conditions, I'll adjust my workaround. Thanks for fixing this so fast.

[msft-github-bot]

:tada:This issue was addressed in #8408, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site