плавающее меню jquery UI над ним, содержащее div

У меня есть div (это всплывающее окно для карты openlayers, но в целом это может быть любой фиксированный размер div), который содержит меню jQuery ui (которое завернуто в ul). Меню не очень хорошо вписывается в div, поэтому я хочу, чтобы меню плавало над ним, так что, когда меню растет, мне не нужно увеличивать размер содержащего div. Это возможно?

Содержащий div сам по себе позиционируется абсолютно, я попытался установить ul , который представляет меню в position: absolute; z-index: 100 , но это не работает. Я также попытался установить переполнение : visible без радости.

Этот снимок экрана показывает, что у меня есть:

Screen grab

Я добавил jsfiddle , который открывает всплывающее окно, когда вы нажимаете маленький оранжевый круг, и вы можете видеть, что внутри меню больше, чем содержащее div.

0
nl ja de
Спасибо - jsfiddle добавлен
добавлено автор Matt Roberts, источник
вы можете дать нам свой код или jsFiddle
добавлено автор Панайот Толев, источник
добавьте ul в div.olMapViewport , укажите position: absolute вычисление левого и верхнего значений на основе кнопки # popup_actions должность
добавлено автор Morpheus, источник

1 ответы

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

Если это то, что вам нужно, вы должны удалить overflow: auto из .olFramedCloudPopupContent и снова, чтобы удалить переполнение : auto из встроенного стиля element #chicken_contentDiv (я не уверен, что вы добавляете его с помощью jQuery).

0
добавлено
Спасибо, что удаляет полосы прокрутки, но не помогает меню float выше. Кроме того, не существует overflow: auto в встроенном стиле в #chicken_ContentDiv (вы имели в виду где-то еще?)
добавлено автор Matt Roberts, источник
Yup, проверка с помощью firebug или chrome dev tools не показывает это для меня - только на .olFramedCloudPopupContent. Как только я удалил это, конечно, мне нужно установить что-то на ul , чтобы он плавал?
добавлено автор Matt Roberts, источник
Я собираюсь дать вам точки - вы были правы, мне нужно было отключить переполнение: авто, но мне также нужно было установить переполнение: видимое на этом элементе и родительских divs
добавлено автор Matt Roberts, источник
Это может быть какой-то плагин, который вы используете, но он устанавливает overflow: auto на #chicken_contentDiv . Вы можете попробовать проверить его с помощью firebug и перейти к этому элементу, и вы увидите:
добавлено автор Панайот Толев, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)