Hi,

In this post, I am sharing how to flexibly stretch and shrink column width in Autocomplete control depending on data length.

• Issue

In Autocomplete, if you have long data that is over specified pixel, extra portion gets truncated as below.

• Solution

One way to solve this is to make each column pixel as long as possible. However it may not be realistic as you can't predict how much end users may enter in production system. Also, if long data is few, most of the rows will have unnecessary spaces, which is not a good UI. Another approach is to add below snippet in the UserWorkForm, so Autocomplete UI flexibly stretches and shrinks depending on the data size.

<style>
.autocompleteAG #gridLayoutWrapper, 
.autocompleteAG .gridTable { 
    width:auto !important; 
} 
</style>

Now the issue should be fixed. If data length is large, Autocomplete UI gets wider, and if data length is small, it gets narrower. This stretch and shrink motion happens dynamically as you scroll up or down.

Hope this helps.

Thanks,