How do I adjust a column width so it fits data under the column?

How do I adjust a column width so it fits data under the column?

oreooreo Posts: 5Questions: 2Answers: 1

I have a column and I have data entered under the column. The data is rendered by joining the elements in an array with \n.

The problem is when the data is shown in the table, it is shown as one line and the \n are seen as spaces. If I manually adjust the width using columns.width for the column to a small value, then you can clearly see each element is rendered in one line as I want to.

However, I want to know if there is another way for the column width to be automatically decided. I have tried autoWidth to be set to false and true, but that did not work for me.

Here is the codepen: https://codepen.io/rxxx/pen/YzeVpMG

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    HTML uses <br> for line breaks not \n. Try replacing your \n with <br>.

    Kevin

  • oreooreo Posts: 5Questions: 2Answers: 1

    Thank you, that seemed to be part of the solution. Now the data is shown in a newline for every element in the array.

    However, the width of the column is still not being adjusted automatically and I still have to manually change using columns.wdith

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited May 2022 Answer ✓

    Maybe the example data in your test case is not showing the problem. Are you expecting the column to shrink to match the width of the largest line in the Days column?

    Please update the test case to show the issue you are trying to solve.

    Maybe you need to add style="width:100%" to the table tag as shown in this example.

    Kevin

  • oreooreo Posts: 5Questions: 2Answers: 1
    edited June 2022

    Yes I am expecting the column to shrink to match the width of the largest line in the Days column.

    I tried doing what you suggested and followed that example but that does not do what I expect. You can see from my codepen.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I'm not clear what the issue is here. As there are only three columns, they spread out along the available space. The table itself won't shrink, so the columns will always use that width. Please can you give more details on what's happening for you, and what you would expect to happen instead.

    Colin

  • oreooreo Posts: 5Questions: 2Answers: 1
    Answer ✓

    My apologies for a poorly worded question.

    I have found that adjusting the width of the table using style="width:x%" will get me a table I desire.

Sign In or Register to comment.