SPFX на вкладке Команды - проблема прокрутки в мобильном приложении

#microsoft-teams #spfx

#microsoft-команды #spfx

Вопрос:

У меня есть SPFX-Webpart в качестве статической вкладки «Команды». Я создал манифест вручную (как здесь https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart). Пока все работает нормально.

Но моя проблема в том, что контейнер не прокручивается в мобильном приложении (в моем случае Android). Содержимое моей веб-части длиннее, чем на дисплее / странице, и я просто не могу прокручивать вниз. Причина этой проблемы: существует контейнер div (с классами «spAppAndPropertyPanelContainer» и «sp-AppBar-parent-mobile»), для которого значение переполнения установлено как скрытое. Этот контейнер отображается sharepoint или teams, но не моей веб-частью.

Таким образом, я могу настроить пользовательский css для переопределения css по умолчанию и преодолеть эту проблему. Все работает нормально. Но почему для этого контейнера установлено значение overflow hidden? Есть ли какие-либо причины для этого и есть ли у меня какие-либо проблемы позже, если мой пользовательский css переопределит это поведение переполнения?

Или есть другое решение для создания прокручиваемого контента в пользовательском приложении spfx в teams mobile?

1. В основном это происходит из-за того, что css переопределяется

2. Переопределено чем? Я имею в виду, что это выглядит любопытно, если css поступает из SharePoint / Teams. Даже с помощью своего рода веб-страницы spfx по умолчанию прокрутка была невозможна

3. это может быть переопределено ms-teams-ui-style.css для вкладки, которая является библиотекой css по умолчанию для вкладки команды, я предлагаю вам добавить свое собственное правило css в spfx webpart

Ответ №1:

Сегодня я столкнулся с точно такой же проблемой и решил ее, добавив следующий код в свой файл css в Visual Studio (протестирован на iOS):

 .spAppAndPropertyPanelContainer, .sp-appBar-parent-mobile { 
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

Я надеюсь, что это может вам помочь!

1. Да, это решение этой проблемы. Но вызывает ли это новые проблемы, или есть «готовый» способ решить эту проблему, или я вообще делаю что-то не так?

2. Какую проблему это вызывает?

3. Переопределение CSS пока не вызывает никаких проблем. Но поскольку существует так много устройств, браузеры и MS, вероятно, изменят это в будущем: это просто неправильно, и я ищу «решение» без необходимости переопределять CSS: (