How to adjust Dropdown box?

Question

I am using Infragistics / igx-input-group and igx-drop-down elements to create a dropdown on my app. All works well and i can fetch the data from REST API's just fine but i am having issues with the display ofthe selected Item. Even so the correct item shows, the lower part is cut off and makes it hard to read. So i am not sure what i am missing but i am looking for a way either to make the size of the text area in the dropdown bigger or the font smaller on the existing box so user can see full selected text.

Here is what it looks like as well as my html code in Angular

<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>

score 1 · Answer 1 · answered May 15 '19 at 14:00

1

Looking at the picture the text for broken inputs, In Progress, is lower than the text in working input, 75. This could be a style issue. I tested this in a StackBlitz with your code and input works correctly.

answered May 15 '19 at 14:00

wnvko

1,985
1
14
18

score 1 · Answer 2 · answered May 22 '19 at 18:23

After some more research found out the issue was with the way i used / created the dropdown box. As the previous version did not have all the required option i used the ig textbox to display the desired value. In the latest version i can now display one value and select a different one. After going straight to the dropdown box and removing the textbox the alignment issue went away.

How to adjust Dropdown box?

2 Answers2