Hi All,

I have a question relating the styling of an editable table. 

I have a table which is generated dynamically based on the user input in an Excel upload. This table can contain up to 10 columns. When a user is entering input in the table (specific cell) it could be that the text entered is to long to fit the current box. This means that the input will not be completely visible. 

I want the table to be 'smart' enough to understand that once the text exceeds the boundries of the current div (cell) the cell should expand. Preferably first sideways up to a maximum width and after that it should expand in length until all data fits in the box. 

I have tried adding CSS styling with min, max-width and height, overflow and break word etc. Nothing seems to work. Could somebody point out what I am missing and how to fix this?


Thanks.

Regards,

Max

Hi Max,


You should the use overflow: ellipsis (see here how).

If you are in Web, I advise to put a tooltip so user can still see the full text.

If you are in Mobile, think about a click on top an see more / see less possiblity (or others) since hovering is off course not available.


Cheers,

João

João Marques wrote:

Hi Max,


You should the use overflow: ellipsis (see here how).

If you are in Web, I advise to put a tooltip so user can still see the full text.

If you are in Mobile, think about a click on top an see more / see less possiblity (or others) since hovering is off course not available.


Cheers,

João

 Hi Joao, 

Thanks for your reply. I have tried this but it doesn't work. The table is not affected by anything I do...

Hi Max,


Have you tried apply that style to the div enclosing the text?


Cheers,

João

João Marques wrote:

Hi Max,


Have you tried apply that style to the div enclosing the text?


Cheers,

João

 Yes, I have added it to the properties part of the input, the container surrounding the input and the cell itself. Also tried to add it to CSS class and tried the input without surrounding container.

 

You can use developer tools to see which CSS is overlapping and why it is not working.

Have you tried to do that?


Cheers,

João

Hi Max,

I'm not sure whether it will be suitable for the mentioned use case but you can give a try with TextAreaAutoResizer Forge component... see this sample app (Edit Cell 1)


Hope this helps you!


Regards,

Benjith Sam