Skip to Content
author's profile photo
Former Member

sap.m.FeedInput height adjusted according to the text inside

Hi,

According to SAP Fiori Guidelines website (https://experience.sap.com/fiori-design/ui-components/feedinput/ ) there is a feature that I need and I cannot replicate.

Basicaly, on Feed Input, when you hit enter several times the height of the input should increase and adjust in order to fit the whole text the user types. However, if I hit ENTER a couple of times the Feed Input brings me a scroll bar and keeps the default height (about 3 rows).

Does anybody knows how to solve this without changing to another type of object like TextArea, etc

Additional info: if you check the live samples from SAP you'll observe the same behaviour as well (scroll bar instead of adjusting the height) - SAPUI5 Explored

Thanks in advance,

Hugo Oliveira

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • author's profile photo
    Former Member
    Apr 18, 2016 at 01:13 PM

    Hi Hugo,

    FeedInput is internally using TextArea control and the default rows is set to 1. So directly if you hit enter it will bring you a scroll bar.

    You can increase the default rows by extending the control. May be something like below :

    var myFeed = sap.m.FeedInput.extend("MyFeedInput",{

    metadata:{

    properties:{

    rows:"string"

    }

    },

    renderer: {}

    });

    myFeed.prototype.setRows = function(sRows){

    this._getTextArea().setRows(parseInt(sRows));

    };

    and use the extended control in your view:

    myFeed= new MyFeedInput({

    showIcon: false,

    rows: "5",

    onPost: function(oEvent){

    }

    });

    Add comment
    10|10000 characters needed characters exceeded