99
Views
8
Comments
Solved
Editable Table with multiple columns
Question

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.


Rank: #4044
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

TestResponsiveTableedited.oml

Rank: #4044

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

Rank: #4554

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.

TestResponsiveTable.oml

Rank: #4044

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

Rank: #4044
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

TestResponsiveTableedited.oml

Rank: #36875

I'm happening like this same error. I can't set CSS design .Please help me.

Thanks

6LI.jpg