UI5 filter bar can not change width

Mar 17, 2017 at 09:49 AM


avatar image

Hi experts,

I use a filter item in my UI5 app, but the field length is not long enough that the field can't display text completely.

I am trying to change the width of sap.ui.comp.filterbar.FilterItem, but obviously, the API method like "setWidth()" or something to set it.

Could any one suggest how to change the width?

Here is my layout view code.

<fb:FilterBar reset="onReset" search="onSearch" showRestoreButton="true" showClearButton="true" header="{i18n>labelfbHeader}">


<fb:FilterItem name="issueDate" label="{i18n>labelfbIssueDate}" mandatory="true">


<DateRangeSelection id="idIssueDate" displayFormat="yyyy/MM/dd" change="onChangeIssueDate"/>



<fb:FilterItem name="regulation" label="{i18n>labelfbRegulation}">

</fb:FilterItem> </fb:filterItems> </fb:FilterBar>

fielter-item.png (10.4 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Mahesh kumar palavalli Mar 17, 2017 at 03:37 PM

There is an option to change the width of fields in filterContainerWidth property in filterbar, which will affect all the filters items. I don't think you have a setting which will change only one filter item width.

But one time I had requirement to change the width of only few items and i went for tradition dom approach which is not recommended and try it on your own risk, code snipet below:


you need to write a code to access the dom element for your field and if you try, you can easily figure out the DOM ID of your filter item easily and then using the above code, you can alter the width of only one single filter and again it is not a recomended approach, hope the first solution works for you.

Best Regards,

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Well, changing all the filters items is also fine to me, but I still can't make it, could you suggest?

Skip to Content