Column definition in Specify 7

Get Help
1

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?

2

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:

    75px,80px,50px

  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?

3

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

4

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

5

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:

image

<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;">
6

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.