Table/grid height set to 100% (v2023)

PHPMaker General Discussion (PHPMaker)
1

Hi,trying to increase the height of the listview tables. if the list only displays < 3 records, the options menu appears inside the table,thus not being able to access other option menu itemsI have for max width

.ew-grid {
  width: 100% !important;
 }

but tried to add
height: 100% !important;but doesn’t appear to kick in?can the options menu be set to display “on top” of the list items or increase the grid to at least the size of 3 or 4 row itemsthanks

2
  1. Are you using an older version? In recent versions, the option menu will not be clipped. If you use recent versions, press F12 in your browser and go to the Console panel to check if there is any JavaScript errors, and press Ctrl + F5 to make sure you are using the latest .css and .js. (If you use older version, always post the version number in the subject.)
  2. The table height is not controlled by .ew-grid, you may read Inspect HTML element and add your own CSS styles.
3

v2023.13no errors to note.it is working, but not correctly for 3 records or less.bottom record (3rd) displays options menu to the top (good)
middle record displays options menu to the bottom - behind the table cutting off the last couple of menu items
top record displays options menu to the bottom - cuts off last menu optioneven with 4 records, the 2nd record displays the option menu to the bottom direction, cutting it off, the bottom two records display the options menu upwards - which is correct/good.anyone else can confirm ?

4
  1. Press F12 in your browser and view the HTML source of the page, make sure you outputted nothing before the tag. If HTML is broken (e.g. due to PHP errors) or not well-formed, CSS may not be correct.
  2. You better test with a new (clean) project without your additional CSS or JavaScript. The option menu should not be clipped in v2023.
5

though I had fixed it but…this is an issue with the options menu ??Browser: Chrome Version 116.0.5845.188 (Official Build) (64-bit) / Edge: Version 116.0.1938.81 (Official build) (64-bit)jquery.js?v=19.13.26DOMException: Failed to execute ‘querySelector’ on ‘Document’: ':has(,:jqfake)’ is not a valid selector.// Support: Chrome 105 - 111 only, Safari 15.4 - 16.3 only
// Make sure the :has() argument is parsed unforgivingly.
// We include * in the test to detect buggy implementations that are
// selectively forgiving (specifically when the list includes at least
// one valid selector).
// Note that we treat complete lack of support for :has() as if it were
// spec-compliant support, which is fine because use of :has() in such
// environments will fail in the qSA path and fall back to jQuery traversal
// anyway.
support.cssHas = assert( function() {
try {
FAIL: document.querySelector( ":has(,:jqfake)" );
LINE 1176 return false;
} catch ( e ) {
return true;
}
} );not sure…

6

Looks like a jQuery issue, make sure you are using the latest jQuery (v3.7.1 as of today).

7

Hi,problem found…as you suggested to create a new project from scratch… the options menu displayed correctly an as should… I compared the new project advanced settings with the existing 2 projects to see if there are any differences…in the 2 existing projects that have the issue i was using the Responsive Table Class: Table-responsive-sm layout, in the new project the default was table-responsive.i set the projects to table-responsive to test, and the option menus worked correctly, i then reset the settings to table-responsive-sm to verify; and the option menus were displayed underneath the table again.not sure if the other classes have issues, but table-responsive-sm is not working correctly.thanks