search

OfficeDev / microsoft-teams-ui-component-library

Component library enhanced experiences styled for use in Microsoft Teams custom applications.
MIT License
127 stars 31 forks source link

whitespace when implementing widgets in dashboards #97

Closed MiguelChaparro-Arkano closed 2 years ago

MiguelChaparro-Arkano commented 2 years ago

Reproduction

I have implemented a widget with 3 tabs, as it appears in the storybook examples (https://dev-int.teams.microsoft.com/storybook/main/index.html?path=/story/ui-templates-dashboards--with-data-vizualization)

Although I have followed the guideline of the library, when implementing my example, I see a large white space under my widget, do you have any idea what it might be?

Here my dependencies:

"dependencies": { "@fluentui/keyboard-key": "^0.3.4", "@fluentui/react-northstar": "^0.54.0", "@fluentui/react-teams": "5.3.0", "@microsoft/teams-js": "^1.6.0", "@microsoft/teamsfx": "^0.2.0", "@types/jest": "^27.0.2", "@types/lodash": "^4.14.176", "@types/node": "^16.11.1", "@types/react": "^16.8.0", "@types/react-dom": "^16.8.0", "@types/react-router-dom": "^5.3.1", "axios": "^0.21.1", "classnames": "^2.3.1", "msteams-react-base-component": "^3.1.0", "react": "^16.14.0", "react-dom": "^16.14.0", "react-media-hook": "^0.4.9", "react-router-dom": "^5.1.2", "react-scripts": "^4.0.3", "typescript": "^4.4.4" },

Expected Behavior

image

Actual Behavior

image

thure commented 2 years ago

The version of react-northstar should be exactly 0.56 when using this library. Try reconciling any peer dependency warnings npm or yarn gives you.

Otherwise, I'm not sure what could be causing this.