I Love PHPMaker

... because it gets even more powerful and flexible!!

I Love PHPMaker » Customize Template » How to Optimize Main Table Width to Maximum Width of Your Site Created with PHPMaker 9.0.1

How to Optimize Main Table Width to Maximum Width of Your Site Created with PHPMaker 9.0.1

PHPMaker generates your main table without optimizing its width to the maximum width of your site. For example, in your list page that contains a table with only two columns or fields, you will see that this total table width will not auto-adjust to the maximum width of your site. Therefore, you will see so many blank space at the right side of your table, and it looks so ugly, I think.

This following modification will solve the problem, by optimizing the total table width to the maximum width of your site. So, there is no blank space anymore at the right side of your table after applying it. Also, by implementing this customization, you will know how to create your own style and overide the old style with it. In other words, we will create and add our own style into the core style that being used by PHPMaker to generate your .css file.

Updated on May 29, 2012: This customization has been implemented in PHPMaker version 9.0.2, it matches to each other, and as a result, it works properly.

Updated on July 21, 2012: This customization has been implemented in PHPMaker version 9.0.3, it matches to each other, and as a result, it works properly.

Updated on September 4, 2012: This customization has been implemented in PHPMaker version 9.0.4, it matches to each other, and as a result, it works properly.

Updated on November 27, 2012: This customization has been implemented in PHPMaker version 9.1.0, it matches to each other, and as a result, it works properly.

Updated on February 9, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.

Updated on June 17, 2013: This customization below has been handled by using MasinoFixedWidthSite extension. You don’t need to implement the customization below if you use my extensions together with the original PHPMaker Template and Extension files.

[hidepost]

  1. Open your \Script\ewcfg.php file, find this code (avoid this step if you cannot find this code):

    // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012
define("MS_SCROLL_TABLE_WIDTH", 890, TRUE);  // The width size of the scrolling table
define("MS_VERTICAL_MENU_WIDTH", 150, TRUE); // The width of vertical menu
define("MS_TOTAL_WIDTH", MS_SCROLL_TABLE_WIDTH + MS_VERTICAL_MENU_WIDTH + 20, TRUE);
// End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012

    then replace it with the following code:

    /*
// Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012
define("MS_SCROLL_TABLE_WIDTH", 890, TRUE);  // The width size of the scrolling table
define("MS_VERTICAL_MENU_WIDTH", 150, TRUE); // The width of vertical menu
define("MS_TOTAL_WIDTH", MS_SCROLL_TABLE_WIDTH + MS_VERTICAL_MENU_WIDTH + 20, TRUE);
// End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012
*/
  2. Still in the \Script\ewcfg.php file, find again this code:

    // General

    before that line, please insert the following code:

    // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012
define("MS_TABLE_WIDTH_STYLE", 1, TRUE);  // 1 = Scroll, 2 = Normal, 3 = 100%
define("MS_SCROLL_TABLE_HEIGHT", 350, TRUE); // The height size of the scrolling table
define("MS_SCROLL_TABLE_WIDTH", 990, TRUE);  // The width size of the scrolling table
define("MS_VERTICAL_MENU_WIDTH", 150, TRUE); // The width of vertical menu
if (MS_MENU_HORIZONTAL) {
  define("MS_TOTAL_WIDTH", MS_SCROLL_TABLE_WIDTH + 20, TRUE);
} else {
  define("MS_TOTAL_WIDTH", MS_SCROLL_TABLE_WIDTH + MS_VERTICAL_MENU_WIDTH + 20, TRUE);
}
// End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012
  3. Warning: This is only for PHPMaker version <= 9.1.0. Open your \extensions\ScrollingTable\scroll.js file, and find this code:

    <?php if ($<!--##=gsTblVar##-->->CurrentAction == "" && $<!--##=gsTblVar##-->->Export == "") { ?>
<script type="text/javascript">
ew_ScrollableTable(ewDom.get('gmp_<!--##=gsTblVar##-->'), "<!--##=sScrollWidth##-->", "<!--##=sScrollHeight##-->");
</script>
<?php } ?>
<!--##
	}
##-->
<!--##/session##-->

    then replace it with the following code (Warning: This is only for PHPMaker version <= 9.1.0):

    <?php if ($<!--##=gsTblVar##-->->CurrentAction == "" && $<!--##=gsTblVar##-->->Export == "") { ?>
<?php if (MS_TABLE_WIDTH_STYLE==1) { // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<script type="text/javascript">
ew_ScrollableTable(ewDom.get('gmp_<!--##=gsTblVar##-->'), "<?php echo MS_SCROLL_TABLE_WIDTH; ?>px", "<?php echo MS_SCROLL_TABLE_HEIGHT; ?>px");
</script>
<?php } ?>
<?php } // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<!--##
	}
##-->
<!--##/session##-->
  4. Warning: This is only for PHPMaker version 9.2.0. Open your \extensions\ScrollingTable\scroll.js file, and find this code:

    <?php if (!ew_IsMobile() && $<!--##=gsTblVar##-->->CurrentAction == "" && $<!--##=gsTblVar##-->->Export == "") { ?>
<script type="text/javascript">
setTimeout(function(){ew_ScrollableTable(ewDom.get('gmp_<!--##=gsTblVar##-->'), "<!--##=sScrollWidth##-->", "<!--##=sScrollHeight##-->");}, 500);
</script>
<?php } ?>
<!--##
	}
##-->
<!--##/session##-->

    then replace it with the following code (Warning: This is only for PHPMaker version 9.2.0):

    <?php if (!ew_IsMobile() && $<!--##=gsTblVar##-->->CurrentAction == "" && $<!--##=gsTblVar##-->->Export == "") { ?>
<?php if (MS_TABLE_WIDTH_STYLE==1) { // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<script type="text/javascript">
setTimeout(function(){ew_ScrollableTable(ewDom.get('gmp_<!--##=gsTblVar##-->'), "<?php echo MS_SCROLL_TABLE_WIDTH; ?>px", "<?php echo MS_SCROLL_TABLE_HEIGHT; ?>px");}, 500);
</script>
<?php } ?>
<?php } // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<!--##
	}
##-->
<!--##/session##-->
  5. Open your \Script\list-script.php file, and find this code:

    <!--## if (bGridAdd) { ##-->
}
<!--## } ##-->
?>

    after the last line of that code, please insert the following code:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table id="ewContainer" cellspacing="0" cellpadding="0" border="0" <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>>
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  6. Still in the \Script\list-script.php file, find again this code:

    <!--##include phpcommon.php/phpcommon-message##-->
<br />
<table cellspacing="0" class="ewGrid"><tr><td class="ewGridContent">

    then replace it with the following code:

    <!--##include phpcommon.php/phpcommon-message##-->
<br />
<?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table cellspacing="0" class="ewGrid" <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>><tr><td class="ewGridContent">
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  7. Still in the \Script\list-script.php file, now move your cursor mouse to the very top left of the text editor (at column 0, row 0) by pressing Ctrl + Home in your keyboard, and then find again this code (Please note, for PHPMaker version 9.2.0, this following code is located around line 573 - 575 in the original list-script.php file):

    <!--## } ##-->
<!--## } ##-->
</p>

    after the last line of that code, please insert the following code:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
</table>
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  8. Open your \Script\search-script.php file, and find this code:

    <table cellspacing="0" class="ewGrid"<!--##=sMultiPageStyle##-->><tr><td class="ewGridContent">
<div class="ewGridMiddlePanel">
<table cellspacing="0" id="<!--##=sTableId##-->"<!--##=ewCSSTableClass##--><!--##=sPageTableStyle##-->>

    then replace it with the following code:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table cellspacing="0" class="ewGrid" <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>><tr><td class="ewGridContent">
<div class="ewGridMiddlePanel">
<table cellspacing="0"<!--##=ewCSSTableClass##--> <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>>
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  9. Open your \Script\view-script.php file, and find this code for PHPMaker < 9.1.0: [code lang="php"] ->Export == "") { ?>

    >

    [/code]

    and if you are using PHPMaker version >= 9.1.0, then find this code:

    <?php if ($<!--##=gsTblVar##-->->Export == "") { ?>
<table class="ewStdTable"<!--##=sMainTableStyle##-->><tbody><tr><td>

    then replace it with the following code (for PHPMaker < 9.1.0): [code lang="php"]
    ->Export == "") { ?>

    >


    [/code]

    or replace it with the following code (for PHPMaker >= 9.1.0):

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<?php if ($<!--##=gsTblVar##-->->Export == "") { ?>
<table cellspacing="0" cellpadding="0" <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?> <!--##=sMainTableStyle##-->><tbody><tr><td>
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  10. Still in the \Script\view-script.php file, find again this code:

    <table cellspacing="0" class="ewGrid"<!--##=sMultiPageStyle##-->><tr><td class="ewGridContent">

    then replace it with the following code:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table cellspacing="0" class="ewGrid"<!--##=sMultiPageStyle##--> <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>><tr><td class="ewGridContent">
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  11. Open your \Script\add-script.php file, find this code (only for PHPMaker < 9.1.0): [code lang="php"] >

    [/code]

    whereas for PHPMaker >= 9.1.0, find this code:

    <table class="ewStdTable"<!--##=sMainTableStyle##-->><tbody><tr><td>

    then replace it with the following code for PHPMaker < 9.1.0: [code lang="php"]

    >


    [/code]

    or replace with the following code for PHPMaker >= 9.1.0:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?> <!--##=sMainTableStyle##-->><tbody><tr><td>
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  12. Still in the \Script\add-script.php file, find again this code:

    <table cellspacing="0" class="ewGrid"<!--##=sMultiPageStyle##-->><tr><td class="ewGridContent">

    then replace it with the following code:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table cellspacing="0" class="ewGrid"<!--##=sMultiPageStyle##--> <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>><tr><td class="ewGridContent">
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  13. Open your \Script\edit-script.php file, and find this code for PHPMaker < 9.1.0: [code lang="php"] >

    [/code]

    or find this code for PHPMaker >= 9.1.0:

    <table class="ewStdTable"<!--##=sMainTableStyle##-->><tbody><tr><td>

    then replace it with the following code for PHPMaker < 9.1.0: [code lang="php"]

    >


    [/code]

    or replace with the following code for PHPMaker >= 9.1.0:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table class="ewStdTable" <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?> <!--##=sMainTableStyle##-->><tbody><tr><td>
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  14. Still in the \Script\edit-script.php file, find again this code:

    <table cellspacing="0" class="ewGrid"<!--##=sMultiPageStyle##-->><tr><td class="ewGridContent">

    then replace it with the following code:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table cellspacing="0" class="ewGrid"<!--##=sMultiPageStyle##--> <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>><tr><td class="ewGridContent">
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  15. Open your \Script\delete-script.php file, find this code for PHPMaker < 9.1.0: [code lang="php"] >

    [/code]

    or find this code for PHPMaker >= 9.1.0:

    <table cellspacing="0" class="ewGrid"<!--##=sMainTableStyle##-->><tr><td class="ewGridContent">

    then replace it with the following code:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table class="ewGrid"<!--##=sMainTableStyle##-->><tr><td class="ewGridContent" <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>>
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  16. Open your \Script\master-script.php file, find again this code for PHPMaker < 9.1.0: [code lang="php"] >

    [/code]

    or find this code for PHPMaker >= 9.1.0:

    <table cellspacing="0" id="t_<!--##=gsTblVar##-->" class="ewGrid"<!--##=sMainTableStyle##-->><tr><td class="ewGridContent">

    then replace it with the following code for PHPMaker < 9.1.0: [code lang="php"]

    >


    [/code]

    or replace it with the following code for PHPMaker >= 9.1.0:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table id="t_<!--##=gsTblVar##-->" cellspacing="0" class="ewGrid"<!--##=sMainTableStyle##--> <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>><tr><td class="ewGridContent">
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  17. Open your \Script\update-script.php file, and find this code:

    <table cellspacing="0" class="ewGrid"<!--##=sMultiPageStyle##-->><tr><td class="ewGridContent">

    then replace it with the following code:

    <?php // Begin of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
<table cellspacing="0" class="ewGrid"<!--##=sMultiPageStyle##--> <?php if (MS_TABLE_WIDTH_STYLE==1) { echo "width=".MS_SCROLL_TABLE_WIDTH."px"; } elseif (MS_TABLE_WIDTH_STYLE==3) {echo "width=100%"; } ?>><tr><td class="ewGridContent">
<?php // End of modification Optimizing Main Table Width to Maximum Width of Site, by Masino Sinaga, April 30, 2012 ?>
  18. Finally, re-generate all of your script files to see the result using PHPMaker as always. 🙂

    19. [/hidepost]

    Comments

    Trackbacks

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Demo Website

    Another Demo

    The following template are not available in this site (must be purchased separately)

    Demo Explanation

    Stock Inventory Management is the good project for your reference, since it uses the real example in the real world. Many useful features you can use from this project, such as how to add the Thousand and Decimal separator character, and also how to calculate multiple row in Grid-Add when End-Users are entering data into the Grid-Add mode.

    Categories

    Articles based on version

    Loading...