Question

我正在使用Infragistics / igx-input-group和igx-drop-down元素在我的应用程序上创建一个下拉列表。一切正常，我可以从REST API中获取数据，但是我在选择项目的显示方面遇到问题。即使如此显示正确的项目，其下部仍被切除，难以阅读。因此，我不确定自己缺少什么，但是我正在寻找一种方法来增大下拉列表中文本区域的大小，或者减小现有框中的字体，以便用户可以看到全部选定的文本。

这是它的外观以及Angular中的html代码

<form novalidate [formGroup]="form">
    <igx-input-group #inputGroup class="input-group" [igxToggleAction]="dropDown">
        <input #input class="input"
               type="text"
               igxInput
               [igxDropDownItemNavigation]="igxDropDown"
               readonly= "true"
               placeholder="{{placeholder}}"
               formControlName="selected"
               (keydown.ArrowDown)="openDropDown()"/>
        <label *ngIf="label && label.length" igxLabel>{{label}}</label>

        <igx-suffix igxButton="icon"
                    class="dropdownToggleButton"
                    igxRipple>
            <igx-icon *ngIf="igxDropDown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
            <ng-template #toggleUp>
                <igx-icon fontSet="material">arrow_drop_up</igx-icon>
            </ng-template>
        </igx-suffix>
    </igx-input-group>

    <igx-drop-down #dropDown (onSelection)="onSelection($event)">
        <igx-drop-down-item *ngFor="let option of options"
                            [value]="option.value"
                            [isSelected]="option.name === selected.value">
            {{ option.name }}
        </igx-drop-down-item>
    </igx-drop-down>

</form>

Answer 1

查看图片中输入中断的文本进行中低于工作输入文本 75 。这可能是样式问题。我在StackBlitz中使用您的代码对此进行了测试，并且输入可以正常工作。

Answer 2

经过更多研究后，发现问题出在我使用/创建下拉框的方式上。由于以前的版本没有所有必需的选项，因此我使用ig文本框显示所需的值。在最新版本中，我现在可以显示一个值并选择另一个值。直接转到下拉框并删除文本框后，对齐问题就消失了。

如何调整下拉框？

2 个答案: