The change in the max-height property in the tabs of the Windows Teams client is not taking effect.

Copper Contributor

Last Updated: This issue has been resolved, with updates at the bottom of the page.

 

I have implemented a basic and common setup using HTML and CSS in the tabs. When hovering over an element, the max-height increases from 28px to 140px.

 

This operation works as expected in Web Teams, Android Teams, and iOS Teams, but it doesn't work in Windows Teams.

 

I have tried modifying the text in the HTML to confirm that my code is the latest code that I just pushed.

 

I have also tried setting max-height: 100vh for other elements, which should be an obvious change, but it still doesn't work in Windows Teams.

 

 

I have attempted to log out, clear the cache (as suggested by the documentation by deleting all files and folders in the %appdata%\Microsoft\Teams directory), and reinstall Teams, but the issue persists.

 

At one point, after logging in with a colleague's account and switching between Teams and Teams Pre several times, it started working once after returning from Teams Pre (Note: Teams Pre currently does not support opening tabs, as of 07/07/2023). However, it stopped working again shortly after, and I can no longer switch to Teams Pre.

 

It has been verified that the server's Cache-Control is set to no-store.

 

Here is my system information:

Windows Version: Windows 11 Enterprise

Version: 21H2

Installation Date: June 7, 2022

Operating System Version: 22000.2057

Experience: Windows Feature Experience Pack 1000.22001.1000.0

Microsoft Teams Version: 1.6.00.16472 (64-bit)

 

Additional information:

 

Is the tab page of Windows Teams using the Firefox browser?

 

The issue may be due to the lack of support for the :has() pseudo-class selector in Firefox. My original code did not work in Firefox either. After modifying my code with jQuery, it worked in Firefox, but still does not work on the tab page of Windows Teams.

 

Last Updated:

 

The issue has been resolved.

 

Although I was unable to retrieve the built-in browser information of Windows Teams from navigator.userAgent, based on the browser behavior, it appears to be Firefox.

 

This is because the problem arises from the lack of support for the CSS :has() selector in Firefox. I can use jQuery's hasClass() or other methods as alternatives to the CSS :has() selector to achieve the desired functionality.

 

It seems that this is not a valuable question, and I apologize for the disturbance caused here.

 

1 Reply
Glad your issue has been resolved, please reach out to us if you have any further questions. Thank you.