Editable Table with multiple columns

I would like to ask some questions:
1 ) Is it possible to fit in so many columns in a table and will it be responsive?

2) I have tried develop a demo regarding editable table with long columns of data. I used CSS overflow-x:scroll to make it scrollable. But I encountered a problem is that the table is not responsive. As shown in the figure below, the first 5 fields' data isn't fully display.

The length of text in the selection of combo-box.

How do I make it responsive and able to fit in long data?

Thanks.


Hi Ee Ping,


I think what is missing here is that configuring the column's width. By default, Outsystems fits all columns in 100% width. Try configuring each column's width by pixel or percentage.


Cheers,

Yopi

Hi Yopi,

Thank you for your reply.

Now I have set the width as 100% in the CSS property. The CSS property is applied at here.

But the text in Amenity column still unable to display full text.

I have attached the oml file for you to refer.


Thank you.


Cheers,

Ee Ping.

Hi Ee Ping,

Try setting the Table width's property to 110% or greater than 100% (to your requirement/preference). Then overflow CSS (horizontal or x-axis) should be applied to the container (testing).


In addition, you can also wrap overflow text or make it hidden.


Cheers,

Yopi

Solution

Try this edited OML.

- I have set the table's width to 120%

- each cell to 10% except for Amenity to 30%


You can actually play around this values as long as it will not exceed the table's width which is set to 120% based on the sample oml attached.


Hope this answers your question. :D

Solution

Yopi Magno wrote:

Try this edited OML.

- I have set the table's width to 120%

- each cell to 10% except for Amenity to 30%


You can actually play around this values as long as it will not exceed the table's width which is set to 120% based on the sample oml attached.


Hope this answers your question. :D

IN THE SAME CLASS TRY CSS

white-space:nowrap;

this will not wrap the text.

also to make it responsive you have to use this container class to desktop only.


try this and let me know if it works.


Regards,

Pankaj


Yopi Magno wrote:

Try this edited OML.

- I have set the table's width to 120%

- each cell to 10% except for Amenity to 30%


You can actually play around this values as long as it will not exceed the table's width which is set to 120% based on the sample oml attached.


Hope this answers your question. :D

Hi Yopi, 


This actually did work for me. Thanks for helping!


Cheers,

Ee Ping.

Pankaj pant wrote:

Yopi Magno wrote:

Try this edited OML.

- I have set the table's width to 120%

- each cell to 10% except for Amenity to 30%


You can actually play around this values as long as it will not exceed the table's width which is set to 120% based on the sample oml attached.


Hope this answers your question. :D

IN THE SAME CLASS TRY CSS

white-space:nowrap;

this will not wrap the text.

also to make it responsive you have to use this container class to desktop only.


try this and let me know if it works.


Regards,

Pankaj


Hi Pankaj,


I have try added the CSS in the same class, but it seems not working for me.
Anyway, thanks for your help!  Much appreciated! 


Cheers,

Ee Ping.