UI5 filter bar can not change width

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    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,

    Add comment
    10|10000 characters needed characters exceeded

Skip to Content