Tokens rendering in Single line without break in mobile: sap.m.Tokenizer

[Former Member]

Experts,

  I am trying to display the tokens with line break. I have a drop down box and the values selected are put in JSON model and pushed as tokens in the UI.

Code :

<FlexBox

          alignItems="Start" displayInline="false" fitContainer="false" >

          <items>

  <Tokenizer  id="Token1" size="2em" scrollWidth="50px"

        tokens="{/mydata}">

        <Token  text="{Name}"  />

        </Tokenizer>

  </items>

          </FlexBox>

In controller I have,

var sel1 = this.getView().byId("select1").getSelectedKey();

      Datalist.mydata.push({Name:sel1});

      var mymodel= new sap.ui.model.json.JSONModel(Datalist);

  this.getView().byId("Token1").setModel(mymodel);

[JACoetzee · Accepted solution]

Hi,

A quick fix is to add this:

.sapMTokenizer .sapMToken {

  float: left;

}

to a styling document.

[Former Member · Accepted solution]

Thanks Jhani.

It worked for me.

Regards,

Shubham

[former_member182372]

known bug, been there for while

[Former Member]

Hi,

i´ve the same problem. I´m using the sap.m Tokenizer within a sap.m.Panel. The tokens are all shown in one single line without a linebreak. Do you have any hints for me how to handle that bug? Or has the bug already been fixed in one of the last UI5 versions (we use version 1.24)?