UI5 filter bar can not change width

[Jerry_Lin]

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

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

<fb:control>

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

</fb:control>

</fb:FilterItem>

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

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

[maheshpalavalli · Accepted solution]

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:

$('#application-ListReport-display-component---worklist--FieldID').parent().parent().css({"width":"50rem"});

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

[Jerry_Lin · Accepted solution]

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

[arumallaanusha · Accepted solution]

Thank you for the solution.

Is there any other way for changing the width of a single filed in FilterBar other than dom approach

[maheshpalavalli · Accepted solution]

Anusha anusha other option, I've mentioned as filterContainerWidth. try creating a css class and manipulate the filed instead of accessing dom (not sure if it is possible though).