Меню управляемого портала разработчиков APIM

Содержание

Вопрос или проблема
Ответ или решение
Проблема с меню на управляемом портале разработчиков APIM
Анализ текущей ситуации
Возможные решения
Заключение

Вопрос или проблема

Я использую управляемый портал разработчиков APIM и столкнулся с проблемой.

У меня определено меню следующим образом:

Главная

API

   SDK

      SDK SUB1

      SDK SUB2

Продукты

Вход

Регистрация

Это отображает меню следующим образом

Когда я нажимаю на “Документация”, а затем на пункт “Руководства пользователя”, я получаю это

Проблема в том, что переполнение на элементе меню установлено на “авто”, что означает, что будут отображаться полосы прокрутки, но, чтобы добавить еще одну проблему, когда вы кликаете на полосу прокрутки, меню закрывается.

Раньше это работало, поэтому я не совсем понимаю, что здесь произошло. Я не могу найти никаких настроек, которые позволили бы нам повлиять на переполнение в меню, и не вижу ничего, что изменилось между последним разом, когда меню работало, и сейчас.

Идеально было бы просто удалить overflow-x:auto в css .dropdown.show, но поскольку мы используем управляемый портал, а не самообслуживание, я не вижу способа сделать это.

Буду признателен за любые идеи.

ИСПРАВЛЕНИЕ
Я сбросил содержимое на одном из наших экземпляров портала разработчиков APIM и настроил простое меню, эта ссылка – видео с проблемой:
Запись экрана проблемы

Ответ или решение

Проблема с меню на управляемом портале разработчиков APIM

Ваша проблема с отображением меню на управляемом портале разработчиков API Management (APIM) представляется достаточно сложной, но давайте рассмотрим её более подробно. Вы описали, что структура вашего меню выглядит следующим образом:

Главная
APIs
- SDKs
- SDK SUB1
- SDK SUB2
Продукты
Вход
Регистрация

При этом возникает проблема с отображением выпадающего меню, которое в результате рендеринга имеет лишние полосы прокрутки из-за настройки overflow элемента. Давайте проанализируем возможные решения этой проблемы.

Анализ текущей ситуации

Меню и его структура: Ваше меню имеет вложенную структуру, что требует правильного управления стилями, особенно для элементов, которые могут заполнять пространство экрана. Указание overflow: auto в классе .dropdown.show действительно добавляет полосу прокрутки, что может привести к неинтуитивному поведению.
Закрытие меню при взаимодействии со скроллом: Как вы правильно заметили, проблема усугубляется тем, что при попытке прокрутить меню оно закрывается. Это поведение может быть связано с JavaScript, контролирующим открытие и закрытие меню. Элементы с overflow: auto требуют дополнительной настройки событий для предотвращения закрытия меню при взаимодействии.

Возможные решения

Проверка настроек: Начните с проверки всех настроек, доступных в управляемом портале. Некоторые параметры стилей могут быть скрыты в разделе темы или внешнего вида. Убедитесь, что в стилях меню нет конфликтующих атрибутов.
Обратитесь к документации Microsoft: Так как ваша проблема касается платформы APIM, возможно, в официальной документации есть упоминания о подобной проблеме или о том, как управлять стилями меню.
Использование пользовательских стилей: Если настройка стилей доступна, попробуйте добавить свои собственные CSS-правила, чтобы переписать атрибут overflow для класса .dropdown.show. Это может выглядеть так:
```
.dropdown.show {
   overflow: visible; /* Замените 'auto' на 'visible' */
}
```
Однако учтите, что в управляемом портале такие изменения могут быть ограничены.
Обратитесь в службу поддержки Microsoft: Если решение проблемы не представляется возможным через предоставленные настройки и документацию, рекомендую обратиться в службу поддержки Microsoft. Они могут помочь в диагностике проблемы и предложении решения.
Использование JavaScript: Если у вас есть доступ к JavaScript в вашем портале, попробуйте обработать событие прокрутки и предотвратить его закрытие. Это может потребовать настройки логики работы с выпадающим меню.

Заключение

Решение проблемы с выпадающим меню на управляемом портале разработчиков привязано к пониманию CSS и взаимодействия JavaScript. Убедитесь, что вы тщательно проверили все настройки доступные в интерфейсе APIM. Если никакие изменения не помогут, рекомендую обратиться в службу поддержки для погружения в инфраструктуру вашего конкретного экземпляра APIM. Это обеспечит наилучшие результаты, учитывая, что каждая ситуация может иметь уникальные нюансы.