tinyMCE 錯誤的下拉菜單 position

Question

我有一個帶有 @tinymce/tinymce-angular@^4.2.1 依賴項的 Angular 12 項目。

在某個視圖中，我有這段代碼

<editor
            [init]="{
              min_height: 350,
              base_url: '/tinymce', 
              suffix: '.min',
              plugins: [
                  'advlist autolink lists link image charmap print preview anchor',
                  'searchreplace visualblocks code fullscreen',
                  'insertdatetime media table paste code help wordcount autoresize'
              ],
              autoresize_bottom_margin: 20,
              contextmenu: '',
              end_container_on_empty_block: true,
              toolbar:
              'undo redo | formatselect | bold italic backcolor | \
              alignleft aligncenter alignright alignjustify | \
              bullist numlist outdent indent | removeformat | help'        
              }"
              [initialValue]="activeCompendium.text"
              formControlName="text"
              >
            </editor>

當我單擊任何展開下拉菜單的按鈕時，例如Paragraph ，相應的下拉菜單會出現在網站底部，這不是預期的。 我試圖用骯臟的 css hacks 來彌補它

.tox-tinymce-aux

容器，這是插入所有下拉菜單的地方，但它沒有幫助。 如何正確設置下拉菜單的錨點/容器，使其看起來像它應該的樣子？

圖 1. 錯誤定位示例

Answer 1

對於遇到此問題的每個人，請注意您的外部容器。

其中一些可能需要具備

.container {
height: 100%
}

通過將所需屬性添加到材質選項卡容器來修復我的錯誤。