Chips overflow on horizontal

[NGUYEN THANH DAT]

Hi Sir,

I am using ChipListComponent. I have a large of ChipItem in  ChipListComponent. Currently, the overflow item is overflow as vertical direction as the image below:

How can I set the overflow to horizontal direction? I mean only one-line ChipItem that I can scroll by horizontal scroll bar.

I have uploaded the react project of the above image to Github, you can check it out at: https://github.com/thanhdat6716/SyncfusionChip

Thanks, and best regards!

[Sivakumar ShunmugaSundaram]

Hi NGUYEN,

Greetings from Syncfusion support.

We have validated the shared React Chip component sample. We understand that you want to render all the chips in a single line with a horizontal scroll bar. To meet this requirement, we suggest you use the below CSS style and set the scroll bar horizontally. We have attached the modified sample for your reference.

Refer the below code snippet.

[App.js]

 

return (

    <header className="App-header">

      <div

        style={{

          backgroundColor: "rgb(216, 137, 137)",

          display: "inline-flex",

          width: "500px",

          height: "50px",

          overflow: "scroll",

          overflowY:"hidden",

          verticalAlign: "middle",

        }}

      >

        <ChipListComponent

          selection="Multiple"

          chips={listChip}

          style={{

            flexWrap:"nowrap",

          }}

       

        ></ChipListComponent>

      </div>

    </header>

  );

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion-chips-843892440.zip

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Sivakumar S

[NGUYEN THANH DAT]

It works. Thank you so much and have a nice day ~~

[Indhumathy Loganathan]

Hi NGUYEN,

We are glad that your reported issue has been resolved. Please get back to us if you need any further assistance.

Regards,

Indhumathy L