Выпадающее меню выбора TinyMCE отображается за кадром

Это проблема в Firefox и IE до сих пор, что я тестировал; проблема не существует в Chrome.

Я включаю два редактора TinyMCE на странице с одним частично за экраном, чтобы начать. Когда я выбираю вариант раскрывающегося списка color picker на панели инструментов на первом экземпляре TinyMCE, выпадающее меню появляется там, где должно быть. Но если я прокручу вниз и выберите раскрывающийся список color picker во втором экземпляре, это выпадающее меню появится ниже редактора и, как правило, на странице.

Вы можете увидеть это в действии здесь: http://jsfiddle.net/nm6wtca3/

Не удаляя CSS html, body, что я могу сделать, чтобы выбор цвета всегда отображался в правильном положении?

Я проследил проблему до установки CSS в элементах html, body.

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

В раскрывающемся div применяется CSS, который автоматически вычисляется TinyMCE. Это выглядит примерно так:

z-index: 65535; 
left: 641.467px; 
top: 633px; 
width: 162px; 
height: 105px;

Как это выглядит в FF (иногда хуже):

Как он появляется в Chrome (как он должен выглядеть):

Ответ 1

Вы сказали, что не хотите удалять CSS из html,body, но вы ничего не сказали о добавлении к нему! Это решение основано на предположении, что вы можете добавить к html,body

Решение

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    position: relative; /* Line added */
}

Пример JSFiddle

Надеюсь, это поможет. Во всей реальности вам действительно нужно применить position: relative; к телу, например, body { position: relative; }

Ответ 2

Я не очень хорошо знаком с tinymce colorpicker, но я вижу эту проблему, и я могу надежно воспроизвести ее: ваша проблема возникает, когда у вас есть сборщик, а затем вы прокручиваете. Я могу воспроизвести это и в хроме. Здесь видео.

Когда я смотрю на DOM, я вижу, что tinyMCE создал два элемента с абсолютным расположением в конце document.body, по одному для каждого сборщика. Когда вы его открываете, их позиция обновляется, чтобы отображать местоположение кнопки панели инструментов в момент ее щелчка, но она никогда не обновляется при прокрутке!

Итак, как это решить? Ну, есть несколько возможностей:

Вариант 1: похоже, что tinyMCE предоставляет метод привязки элемента управления к событию (здесь). При этом вы можете связать обратный вызов с "прокруткой", который переустанавливает поле...

Да, теперь, когда я думаю об этом, вы можете просто закрыть любых открытых colorpickers всякий раз, когда пользователь прокручивает... kinda чувствует себя как копия, но там нет отрицания, что у него есть лучший R.O.I.;) Мы будем называть это Вариантом 2!

Вариант 3: в зависимости от реализации colorpicker вы можете переопределить, где в DOM эти divs будут отображаться. Метод API, который я видел, выглядел наиболее перспективным, здесь. Когда у вас есть div внутри родителя с относительным позиционированием, вам также придется сделать алгоритм позиционирования colorpicker достаточно умным, чтобы выглядеть в нужном месте для смещения x и y... когда я пробовал это, просто перемещая элемент и затирая в некоторых css вручную в chrome-console, алгоритм все еще вычислял смещения x и y на основе doc.body, поэтому в зависимости от того, где вы были прокручены во время щелчка, все было бы не в положении

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

Надеюсь, вам будет достаточно информации, чтобы решить проблему... Сообщите мне, если у вас есть вопросы!

Ответ 3

Похоже, проблема вызвана overflow-x: hidden;

Это может быть не тот ответ, который вы хотите, но удаление этого или перенос его на обертку страницы решит вашу проблему.

Рабочий пример

html, body {
    width: 100%;
    height: 100%;
    padding:0;
    margin:0;
}
#pagewrapper{
    overflow-x: hidden;
}

Другим вариантом будет принудительное перемещение по прокрутке, но, честно говоря, это перебор... Я настоятельно рекомендую исправлять CSS вместо этого.

Другой рабочий пример

$('body').scroll(posfix); // when the body scrolls 
$('#mceu_10').click(posfix); // when you click the top font color button
$('#mceu_35').click(posfix); // when you click the bottom font color button

function posfix() {
    setTimeout(function () { // hack way to ensure it fires after the menu is shown
        $('#mceu_51').css({
            top: $('#mceu_10').offset().top + $('#mceu_10').height(), // set top/left based on button position
            left: $('#mceu_10').offset().left + $('#mceu_10').width() / 2
        });
        $('#mceu_52').css({
            top: $('#mceu_35').offset().top + $('#mceu_35').height(),
            left: $('#mceu_35').offset().left + $('#mceu_35').width() / 2
        });
    }, 1);
}

Ответ 4

он работает на firefox и отлично работает в Internet Explorer

просто удалите этот код css

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

Ответ 5

Пожалуйста, взгляните на это:

html,
body {
    width: auto;
    height: auto;
    overflow-x: hidden;
}

Вы можете просто установить ширину и высоту тела на auto, тогда не будет необходимости использовать позицию, и вам не нужно ничего удалять. Я думаю, вам не нужно использовать height: 100%, поскольку он будет автоматически вычисляться TinyMCE. я надеюсь, что это помогло.

Обновление

Посмотрите на снимок экрана с хрома и его же в firefox. И я не удалял какой-либо css, а просто изменил... и поставив 100% в css, результат будет таким: -

Пожалуйста, проверьте это с авто, но не на 100%.. спасибо