PrimeNG p 編輯器工具欄上的格式和大小選擇下拉菜單問題

Question

我將 PrimeNg 8.1.1 與 Angular 8.2.5 和 quill 1.3.7 一起使用。 向編輯器 header 工具欄添加大小菜單時遇到問題。 選定的菜單項隱藏在下拉指示器后面，而不是如圖所示與菜單項的右側對齊。

我已經嘗試為編輯器配置 header，如下所示，但我仍然遇到問題。

                                        <p-header>
                                          <select class="ql-size">
                                            <option value="small">Tiny</option>
                                            <option selected></option>
                                            <option value="large">Subheading</option>
                                            <option value="huge">Heading</option>
                                          </select>                                           
                                        <span class="ql-formats">
                                          <button class="ql-bold" aria-label="Bold"></button>
                                          <button class="ql-italic" aria-label="Italic"></button>
                                          <button class="ql-underline" aria-label="Underline"></button>
                                          <button class="ql-strike" aria-label="Strike"></button>
                                        </span>
                                        <span class="ql-formats">
                                          <select title="Text Color" class="ql-color" defaultValue="rgb(0, 0, 0)">
                                            <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
                                            ...
                                            <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
                                          </select>
                                          <span class="ql-format-separator"></span>
                                          <select title="Background Color" class="ql-background" defaultValue="rgb(255, 255, 255)">
                                            <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
                                            ...
                                            <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
                                          </select>
                                      </span>
                                        <span class="ql-formats">
                                          <button class="ql-list" title="List"></button>
                                          <button class="ql-bullet" title="Bullet"></button>
                                          <select title="Text Alignment" class="ql-align" >
                                            <option selected>Left</option>
                                            <option value="center" label="Center"></option>
                                            <option value="right" label="Right"></option>
                                            <option value="justify" label="Justify"></option>
                                          </select>            
                                        </span> 
                                        <span class="ql-formats">
                                          <button aria-label="Link" class="ql-link"></button>
                                          <button aria-label="Image" class="ql-image"></button>
                                          <select title="Font Family"class="ql-font">
                                            <option selected></option>
                                            <option value="serif">Serif</option>
                                            <option value="monospace">Monospace</option>
                                           </select>
                                        </span>
                                      </p-header>  

Answer 1

我的適用於下面的代碼

 <p-header>
                                <span class="ql-formats">
                                    <select class="ql-header" defaultValue="0">
                                        <option value="1">Heading</option>
                                        <option value="2">Subheading</option>
                                        <option value="0">Normal</option>
                                    </select>
                                    <select class="ql-font">
                                        <option></option>
                                        <option value="serif"></option>
                                        <option value="monospace"></option>
                                    </select>
                                </span>
                                <span class="ql-formats">
                                    <button class="ql-bold" type="button"></button>
                                    <button class="ql-italic" type="button"></button>
                                    <button class="ql-underline" type="button"></button>
                                </span>
                                <span class="ql-formats">
                                    <select class="ql-color"></select>
                                    <select class="ql-background"></select>
                                </span>
                                <span class="ql-formats">
                                    <button
                                        class="ql-list"
                                        value="ordered"
                                        type="button"
                                    ></button>
                                    <button
                                        class="ql-list"
                                        value="bullet"
                                        type="button"
                                    ></button>
                                    <select class="ql-align">
                                        <option defaultValue></option>
                                        <option value="center"></option>
                                        <option value="right"></option>
                                        <option value="justify"></option>
                                    </select>
                                </span>
                                <span class="ql-formats">
                                    <button class="ql-link" type="button"></button>
                                    <button class="ql-code-block" type="button"></button>
                                    <button class="ql-clean" type="button"></button>
                                </span>
                            <p-header>