Primeng: AutoComplete dropdown wraps to next line

Created on 26 Mar 2017  路  2Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

if i put an autocomplete in a small column, dropdown button goes to new line

Expected behavior
dropdown button keeps the same line

Minimal reproduction of the problem with instructions

<div class="ui-g-1">
<p-autoComplete [(ngModel)]="country" [dropdown]="true" field="name" [size]="30" placeholder="Countries" [minLength]="1"></p-autoComplete>
</div>

What is the motivation / use case for changing the behavior?

for fix this i add this css

.ui-autocomplete-dd .ui-autocomplete-dropdown.ui-corner-all{
    position:absolute;
    transform: translateX(-100%);
}
defect

Most helpful comment

I am also facing the same problem. My workaround is:

/* start - hack to fix issue with dropdown caret position */
.ui-autocomplete-dd .ui-inputtext {
    float: left;
}

.ui-autocomplete-dd .ui-autocomplete-dropdown {
    float: right;
    transform: translateY(-100%);
}
/* end -  hack to fix issue with dropdown caret position */

All 2 comments

I am also facing the same problem. My workaround is:

/* start - hack to fix issue with dropdown caret position */
.ui-autocomplete-dd .ui-inputtext {
    float: left;
}

.ui-autocomplete-dd .ui-autocomplete-dropdown {
    float: right;
    transform: translateY(-100%);
}
/* end -  hack to fix issue with dropdown caret position */

Please wrap the component inside ui-fluid if inside a tight space, ui-fluid will take care of it (4.0.2)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

watalberto picture watalberto  路  3Comments

miresk picture miresk  路  3Comments

lilling picture lilling  路  3Comments

markgoho picture markgoho  路  3Comments

jisqaqov picture jisqaqov  路  3Comments