闪电组合框被切断

Question

我正在构建一个使用组合框的闪电网络组件。它的下拉部分似乎被容器的边界缩短了。

我尝试向输入元素及其容器的样式表添加高度、z-index、溢出和边距修饰符，唯一具有可见效果的就是向组合框的容器添加边距，这只会使更多下拉菜单有空间显示其内容，但不能解决问题。

以下是 html 文件的摘录：

    <div class="slds-col slds-grid">
        <!-- Complete Task -->
        <div class="slds-grid slds-col slds-size_2-of-4 slds-p-right_small slds-truncate">
          <div class="slds-col">
            <div class="slds-border_bottom" style="background-color: #ecd4b566">Log a Call</div>
            <div class="slds-grid_vertical slds-p-top_small">
              <div class="slds-col">
                <lightning-combobox 
                  class="spencer_combobox"
                  variant="label-hidden" 
                  placeholder="-- Call Result --" 
                  options={callResults} 
                  value={selectedResult}
                  required
                  onchange={handleResultSelection}>
                </lightning-combobox>
              </div>
              <div class="slds-col">
                <lightning-textarea maxlength=255 placeholder="Write comments here" onchange={handleComment} value={commentValue}></lightning-textarea>
              </div>
              <div class="slds-col">
                <lightning-button class="slds-col" variant="Brand" label="Complete Task" onclick={handleCompleteTaskClick} disabled={buttonDisabled}></lightning-button>
              </div>
            </div>
          </div>
        </div>

我希望下拉菜单在其他元素之上可见，但它最终被隐藏或切断。

Answer 1

想通了。
我将

slds-truncate

放入容器的类中，并且它附带了

overflow:hidden

，因此我可以删除截断或编辑样式表来解决问题。