Hi,
Is it possible to set a central vertical alignment within a row of a table?
For example, if you have a two column table which consists of text & boolean in column 1 and just text in column 2, the text will not be aligned. See the screenshot below as an example:
Is there a way to align this entire row centrally so that all text reads smoothly?
Here is a snippet of the code that I used for the table above (embedded within stripnewlines):
Many thanks
Joe
Hi @jhanley,
It is not possible to vertically align the content of one row in a table. However, in order to make your example more vertically aligned, you should put the boolean in a separate column.
The alignment will not be 100% equal, but will be a lot better than the screenshot you shared.
We will take this into account for future lay-out improvements.
Good luck with the further completion of your template!
Kind regards,
Robin
Hi @robindeclercq,
Thanks for getting back to me - that makes sense!
Is there a way to set column widths to something other than %'s? The first column in my example will only ever have the text as shown, so this should always be the same width. If I could set the boolean column to start just after the text finishes, it shouldn’t look strange for our users who use a wide screen.
Many thanks,
Joe
Edit: Also, is there a way to change the image of the boolean? For example, if we want a pencil icon to show instead could this be achieved?
Cheers
Hi @jhanley,
May I ask what you would like to use instead of %'s to define the column widths? This will probably not be possible (e.g. px is not supported).
In order to have the text from the first column closer to the boolean in the second column, you could perhaps use the ‘:’ sign in your header to align the text to the left or right, e.g.:
|-15%-:|:-1%-|:-7%-|-47%-|-3%-|-15%-+
Furthermore, as seen in my code above, we would suggest to limit the column width of the column with the boolean to 1%. This will make sure the first three columns are quite close to each other.
One last thing that can visually improve the table it to add the ‘#’ sign at the end of the header.
|-15%-:|:-1%-|:-7%-|-47%-|-3%-|-15%-#+
The ‘#’ sign will show the table lines. Maybe you could play around with these tips and hopefully you can create the table you want!
As regard the image of the boolean, I’m afraid it is not possible to change this image.
In case of further questions, do not hesitate to reach out to us.
Kind regards,
Robin
Hi @robindeclercq,
I’m not sure what other options would be available, but imagine px is along the lines of what I was considering. I was just wondering if there was an option other than %, which would allow us to always know the column width regardless of the user’s screen size, but had no thoughts of what this could be!
Thanks for the suggestions. I’ve opted to move the boolean column before the text column instead as I think that creates a happy medium and still looks consistent with the rest of our template.
Thanks again for all of your support!
Kind regards,
Joe