Microsoft Tech Community Live:  Microsoft Teams Edition
November 09, 2021, 08:00 AM - 12:00 PM (PST)

Utilizing Full Width of Meeting Side Panel

%3CLINGO-SUB%20id%3D%22lingo-sub-2176319%22%20slang%3D%22en-US%22%3EUtilizing%20Full%20Width%20of%20Meeting%20Side%20Panel%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2176319%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20exploring%20in-meeting%20applications%20and%20using%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FOfficeDev%2FMicrosoft-Teams-Samples%2Ftree%2Fmain%2Fsamples%2Fmeetings-token-app%2Fcsharp%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3Etoken%20generator%20app%3C%2FA%3E%20as%20template.%20While%20customizing%20the%20UI%2C%20I%20noticed%20that%20the%20actual%20iframe%20that%20gets%20displayed%20in%20the%20meeting%20side%20panel%20has%20a%20width%20of%20280px%20as%20compared%20to%20320px%20mentioned%20in%20the%20docs.%20My%20entire%20React%20App%20gets%20displayed%20in%20this%20frame%20no%20matter%20what.%20Is%20there%20any%20way%20I%20can%20utilize%20the%20full%20space%20and%20get%20rid%20of%20unnecessary%20margin%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3CP%3ETehreem%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2176319%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Edeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMeetings%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2192848%22%20slang%3D%22en-US%22%3ERe%3A%20Utilizing%20Full%20Width%20of%20Meeting%20Side%20Panel%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2192848%22%20slang%3D%22en-US%22%3EHi%20tehreemf%2C%20Currently%20we%20don't%20have%20control%20over%20changing%20or%20utilizing%20the%20full%20width%20of%20the%20side%20panel.%20You%20can%20raise%20user%20voice%20%5Bhere%5D(%3CA%20href%3D%22https%3A%2F%2Fmicrosoftteams.uservoice.com%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmicrosoftteams.uservoice.com%2F%3C%2FA%3E).%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2195838%22%20slang%3D%22en-US%22%3ERe%3A%20Utilizing%20Full%20Width%20of%20Meeting%20Side%20Panel%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2195838%22%20slang%3D%22en-US%22%3EOkay.%20Thank%20you%20for%20your%20response.%3CBR%20%2F%3E%3CBR%20%2F%3EIs%20there%20also%20no%20way%20to%20change%20the%20margins%20around%20app%20title%3F%20I%20see%20a%20huge%20chunk%20of%20space%20both%20above%20and%20below%20the%20title%20and%20'x'%20button.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2210422%22%20slang%3D%22en-US%22%3ERe%3A%20Utilizing%20Full%20Width%20of%20Meeting%20Side%20Panel%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2210422%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F982832%22%20target%3D%22_blank%22%3E%40tehreemf%3C%2FA%3E%2C%20Right%20now%20this%20is%20the%20default%20design%20of%20the%20teams.%20Customization%20is%20not%20allowed.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

Hi,

 

I am exploring in-meeting applications and using token generator app as template. While customizing the UI, I noticed that the actual iframe that gets displayed in the meeting side panel has a width of 280px as compared to 320px mentioned in the docs. My entire React App gets displayed in this frame no matter what. Is there any way I can utilize the full space and get rid of unnecessary margin?

 

Thanks

Tehreem

8 Replies

Hi @tehreemf, Currently we don't have control over changing or utilizing the full width of the side panel. You can raise user voice here.

Okay. Thank you for your response.

Is there also no way to change the margins around app title? I see a huge chunk of space both above and below the title and 'x' button.

Hi @tehreemf, Right now this is the default design of the teams. Customization is not allowed. 

Check if below article helps: https://docs.microsoft.com/en-us/microsoftteams/platform/resources/removing-tab-margins

 

Note: This update is in Developer preview

Hi @Subba_Reddi_Tummuru,

Thank you for letting me know about this update. Any idea how I can update to the latest Teams version to see these changes? I'm using developer preview (version 1.4.00.7174 released on March 3). As the document says new changes will be there on March 5th in developer preview, I figured there must be a new update but I'm not able to get it..?

Capture.PNG

Click on profile icon -> Click on "About" -> Click on Developer preview to see the updates.

You can also verify the same in browser teams client(https://teams.microsoft.com).

Hi @Subba_Reddi_Tummuru 

 

I confirmed that I'm using the latest version (1.4.00.8975) which was updated on 07/04/2021 on my system. Yet I'm still seeing the border around the app in the meeting side-panel.

 

Is it possible that the decision to remove app margin's only apply to tabs/pre-meeting panels and not side-panel? Or do I need to take any other steps? I also have developer preview enabled if that could be a reason.

 

tehreemf_0-1617863014390.png

 

 

@tehreemf It seems change is not applicable for meeting side panel. Observed same behavior.

Subba_Reddi_Tummuru_0-1617876375960.png