How to Change Vertical-Align of CheckBox Item, View, Edit, and Copy Links from Middle to Top on List Page in Websites that Created with PHPMaker 8.0.3

PHPMaker by default will use the value of middle for vertical-align for the following: checkbox item, view link, edit link, and copy link, and also the current value of the other fields in the same/related row of the table in the list page of your generated web application. I think this is normal if most of the fields in the same row contains have no much difference characters between one and the other fields. But, what will be happened if one of the fields contains many characters and we want to display all of them in the list page? Yeah, you will see some or most of the fields will contain much space in the above and below of those fields.

This following trick will show you how to change that vertical-align of checkbox item, view, edit, and copy links from middle to top. This is very useful if one of your fields in the certain database contains text/memo (large) field type, and you want to display the value of this field, but in the other side, the other field in that same table contains smaller characters than the text/memo field type. That would be better if we make the smaller character fields sit on the top of the cell in the list page (vertical-align=top), so users will focus to see the start of all fields content sit on the top of their own cells.

[hidepost]

1. Open your PHPMaker project (.pmp) file using PHPMaker.
2. From Tables setup, click one of your desired tables, and then Server Events/Client Scripts tab.
3. Go to/expand the Server Events -> Table-Specific -> Common -> Row_Rendered, and the insert the following code into the editor code in the right pane:

     $this->yourfieldname->CellCssStyle = "vertical-align:top;";
   

4. Go to/expand the Server Events -> Table-Specific -> List Page -> ListOptions_Rendered, and the insert the following code into the editor code in the right pane:

     $this->ListOptions->Items["checkbox"]->CssStyle = "vertical-align:top;";
     $this->ListOptions->Items["view"]->CssStyle = "vertical-align:top;";
     $this->ListOptions->Items["edit"]->CssStyle = "vertical-align:top;";
     $this->ListOptions->Items["copy"]->CssStyle = "vertical-align:top;";
   

5. Finally, re-generate your related script files using PHPMaker as usual.

[/hidepost]