HTML in Text Formula Field

[Matthew_Freed]

I am a complete novice at HTML but am attempting to create a table in a text formula field. I’m able to assign a hex color to each field and pull in the desired fields’ data. But…I can’t seem to get the cell/column width to be what I want. Ideally, I want to define the first two columns at about 20% each and have the incoming data be aligned left within the cell, then the third column at 60% width with its data aligned left within the cell.

Any suggestions how this is done? I’ll attach screen shots showing the code and the result as it stands now.

[Matthew_Freed]

This is how it looks with the given code…

[Darryn]

Hi Matthew1,

The reason for your columns coming out mis-aligned is that each text formula field is it’s own table, and an HTML table’s behaviour is to automatically resize its columns to fit the content of each table; hence the varying widths.

The way to fix this is to ensure your table is firstly set to 100% width, and then for each column to be given a size, which can be done in % or pixels (e.g. 20% or 250px).

I have adjusted your code to show you both how to control the widths on each column as well as showing you how to change the text alignment, which I set the second column to center.

[Matthew_Freed]

Thanks for taking a look at the code, Darryn! Much appreciated. I popped in that code and in place of “Materials” and the other text I put the fields that need to get dragged into this table. But…when put into Knack it gives me a “URI Malformed” error. However the code works fine in an HTML editor.
Any idea why Knack doesn’t like the code even though an HTML editor is fine with it all?

Here is the exact code I currently have in there:

[Darryn]

Matthew, it appears the Text Formula does not like the percent (%) symbol and there doesn’t seem to be a means around it within Knack (what is referred to as escaping special characters).

I didn’t want to over complicate the solution for you, but you really have a couple options to tackle the problem:

1) Adjust all your columns to use Pixel widths (px) instead of Percent (%).

The challenge with this approach is that it will always be a fixed width irrespective of screen / browser width. Your formula would need to be adjusted as follows:

2) Rather use the CSS Styles under Knack’s custom code. (Best & Cleanest Solution)

This was going to be my initial suggestion when responding to this topic, but I did not overcomplicate this for you. That said, this is by far the cleanest approach as it keeps the formatting out of your formulas, making it easier to maintain going forward (and to change a color, alignment, etc you can just adjust the CSS and all references are adjusted across your project).

To do this, your formula needs to change as follows:

Note the table attribute called “class” that is set to “mytable”. Here you can use any name, just make sure its unique and logical for you. I personally like to include my project name in my CSS class names e.g. “myproject-product-table”.

This would allow you to identify that HTML element throughout the full HTML code on a page and to style any HTML element with that tag (and this is why it should be unique). Further to this I removed your Font HTML elements, as I am going to demonstrate how to do this in CSS and keep your formula lean (and clean).

This is where it may get a little more tricky, but to style that element you head over to your Knack Builder’s Settings > API & Code > CSS page and enter the following:

To explain this CSS code:

• what you will notice in the CSS is the Class is identified by placing a full-stop in front of the element. That will allow the browser to find all TABLE elements with class that is “mytable”, so in this instances its “.mytable”
• Hereafter, if you include TR and TD elements after your class name, it will find the HTML children elements below that class, allowing my to access the columns and rows of your table.
• And finally, to access specifically the 1st, 2nd, 3rd columns, you can use the “:nth-child(x)” where x is replaced by the column number you wish to reference.

Really hope one of these approaches works for you.

[Matthew_Freed]

Thanks! this was a huge help. I was able to make it work with HTML/CSS with a few tweaks. In a perfect world I would love to have each column be uniform width but setting them pixels (not percentages) didn’t seem to work. Here is what ended up working well enough: