2

我正在使用 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>
4

2 回答 2

1

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

于 2019-05-22T18:23:10.820 回答
1

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

于 2019-05-15T14:00:07.850 回答