Column definition in Specify 7

According to the Form System guidelines (Form System · specify/specify7 Wiki · GitHub), Specify 7 interprets fixed column width values, those with “px”, as fractions. But, how?
Is each “px” value assigned a 1fr?
How would Specify 7 interpret something like this: 75px,80px,50px?

Hi @sorosoro,

I will try my best to explain the system, although it can be quite complex. This is approximately how it works!

  1. Specify assumes that every other column is a spacer or gap, so you would need to define the column definition as follows:

    <columnDef os="lnx">75px,2px,80px,2px,50px</columnDef>
  2. Specify would discard the 2px gaps:

  3. It would then add together all of the pixels

    75+80+50 = 205

  4. It would then take each value and divide it against the total.

    75/205 = 0.3658536585 or 36.59%
    80/205 = 0.3902439024 or 39.02%
    50/205 = 0.243902439 or 24.39%

In summary, the first column would then take up 36.59% of the form width, the second would take up 39.02%, and the third column would take up 24.39%.

If column is not defined as a pixel value (i.e, p:g or p or any other value) , its size would be dynamically determined based on the content within it.

Does that make sense?

Yes, it makes sense. It’s clear now. Thanks for the quick reply!

Just to know, does Specify 7 actually transforms the fixed pixel values into % or into fr units?

Specify actually converts the pixels into fr units!

Seee the <columnDef> defined below:

<columnDef os="lnx">115px,2px,195px,5px,125px,2px,210px,5px,125px,2px,131px,15px,p:g</columnDef>

In the browser developer tools, you can see the columns defined:


<div class="grid items-center p-1 -ml-1 gap-2 " aria-hidden="false" style="grid-template-columns: 115fr 195fr 125fr 210fr 125fr 131fr auto;">

Thanks! That was my first thought but then I was not sure, and I forgot about the inspect tool of the browser. That’s a good tip. Cheers.