Skip to content

CSS Error #3574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Servidesk-IaaS365 opened this issue Feb 28, 2025 · 19 comments
Open

CSS Error #3574

Servidesk-IaaS365 opened this issue Feb 28, 2025 · 19 comments

Comments

@Servidesk-IaaS365
Copy link

Describe the bug
Form view dont have the correct css style
To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Assistance - Forms' or simplified Interface home forms

Screenshots

Image

Image

Desktop (please complete the following information):

  • OS: Rocky Linux 9
  • Browser Edge
Information about system installation and configuration
GLPI 10.0.18-git-desarrollo-e8c1fdee ( => /usr/share/glpi)
Installation mode: RPM
Current language:en_GB

Server
 
Operating system: Linux VL0870 5.14.0-503.26.1.el9_5.x86_64 #​1 SMP PREEMPT_DYNAMIC Wed Feb 19 16:28:19 UTC 2025 x86_64
PHP 8.2.27 fpm-fcgi (Core, PDO, Phar, Reflection, SPL, SimpleXML, Zend OPcache, bcmath, bz2, calendar, cgi-fcgi, ctype, curl,
date, dom, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, igbinary, intl, json, ldap, libxml, mbstring, msgpack, mysqli,
mysqlnd, openssl, pcre, pdo_mysql, pdo_sqlite, posix, random, redis, session, shmop, sockets, sodium, sqlite3, standard,
sysvmsg, sysvsem, sysvshm, tokenizer, xml, xmlreader, xmlwriter, xsl, zip, zlib)
Setup: max_execution_time="60" memory_limit="-1" post_max_size="8M" safe_mode="" session.save_handler="files"
upload_max_filesize="4M" disable_functions=""
Software: nginx/1.27.4
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0
Server Software: MariaDB Server
Server Version: 11.4.5-MariaDB
Server SQL Mode: STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION
Parameters: glpi@127.0.0.1/glpi
Host info: 127.0.0.1 via TCP/IP

PHP version (8.2.27) is supported.
Sessions configuration is OK.
Allocated memory is unlimited.
mysqli extension is installed.
Following extensions are installed: dom, fileinfo, filter, libxml, json, simplexml, xmlreader, xmlwriter.
curl extension is installed.
gd extension is installed.
intl extension is installed.
zlib extension is installed.
The constant SODIUM_CRYPTO_AEAD_XCHACHA20POLY1305_IETF_NPUBBYTES is present.
Database engine version (11.4.5) is supported.
No files from previous GLPI version detected.
The log file has been created successfully.
Write access to /var/lib/glpi/files/_cache has been validated.
Write access to /var/lib/glpi/files/_cron has been validated.
Write access to /var/lib/glpi/files has been validated.
Write access to /var/lib/glpi/files/_dumps has been validated.
Write access to /var/lib/glpi/files/_graphs has been validated.
Write access to /var/lib/glpi/files/_lock has been validated.
Write access to /var/lib/glpi/files/_pictures has been validated.
Write access to /var/lib/glpi/files/_plugins has been validated.
Write access to /var/lib/glpi/files/_rss has been validated.
Write access to /var/lib/glpi/files/_sessions has been validated.
Write access to /var/lib/glpi/files/_tmp has been validated.
Write access to /var/lib/glpi/files/_uploads has been validated.
For security reasons, SELinux mode should be Enforcing.

Web server root directory configuration seems safe.
Sessions configuration is secured.
OS and PHP are relying on 64 bits integers.
exif extension is installed.
ldap extension is installed.
openssl extension is installed.
Following extensions are installed: bz2, Phar, zip.
Zend OPcache extension is installed.
Following extensions are installed: ctype, iconv, mbstring, sodium.
Write access to /usr/share/glpi/marketplace has been validated.
Timezones seems loaded in database.

GLPI constants
 
GLPI_ROOT: "/usr/share/glpi"
GLPI_CONFIG_DIR: "/etc/glpi"
GLPI_VAR_DIR: "/var/lib/glpi/files"
GLPI_LOG_DIR: "/var/log/glpi"
GLPI_HTMLAWED: "/usr/share/php/htmLawed/htmLawed.php"
GLPI_FONT_FREESANS: "/usr/share/fonts/gnu-free/FreeSans.ttf"
GLPI_SYSTEM_CRON: true
GLPI_INSTALL_MODE: "RPM"
GLPI_MARKETPLACE_DIR: "/usr/share/glpi/marketplace"
GLPI_USE_CSRF_CHECK: "1"
GLPI_CSRF_EXPIRES: "7200"
GLPI_CSRF_MAX_TOKENS: "100"
GLPI_USE_IDOR_CHECK: "1"
GLPI_IDOR_EXPIRES: "7200"
GLPI_ALLOW_IFRAME_IN_RICH_TEXT: false
GLPI_SERVERSIDE_URL_ALLOWLIST: ["#^http://[^@:]+(:80)?(/.)?$#","#^https://[^@:]+(:443)?(/.)?$#","#^feed://[^@:]+(/.)?$#"]
GLPI_DISALLOWED_UPLOADS_PATTERN: "/\.(php\d
|phar)$/i"
GLPI_TELEMETRY_URI: "https://telemetry.glpi-project.org"
GLPI_NETWORK_MAIL: "glpi@teclib.com"
GLPI_NETWORK_SERVICES: "https://services.glpi-network.com"
GLPI_MARKETPLACE_ALLOW_OVERRIDE: true
GLPI_MARKETPLACE_MANUAL_DOWNLOADS: true
GLPI_USER_AGENT_EXTRA_COMMENTS: ""
GLPI_DISABLE_ONLY_FULL_GROUP_BY_SQL_MODE: "1"
GLPI_AJAX_DASHBOARD: "1"
GLPI_CALDAV_IMPORT_STATE: 0
GLPI_DEMO_MODE: "0"
GLPI_CENTRAL_WARNINGS: "1"
GLPI_TEXT_MAXSIZE: "4000"
GLPI_DOC_DIR: "/var/lib/glpi/files"
GLPI_CACHE_DIR: "/var/lib/glpi/files/_cache"
GLPI_CRON_DIR: "/var/lib/glpi/files/_cron"
GLPI_DUMP_DIR: "/var/lib/glpi/files/_dumps"
GLPI_GRAPH_DIR: "/var/lib/glpi/files/_graphs"
GLPI_LOCAL_I18N_DIR: "/var/lib/glpi/files/_locales"
GLPI_LOCK_DIR: "/var/lib/glpi/files/_lock"
GLPI_PICTURE_DIR: "/var/lib/glpi/files/_pictures"
GLPI_PLUGIN_DOC_DIR: "/var/lib/glpi/files/_plugins"
GLPI_RSS_DIR: "/var/lib/glpi/files/_rss"
GLPI_SESSION_DIR: "/var/lib/glpi/files/_sessions"
GLPI_TMP_DIR: "/var/lib/glpi/files/_tmp"
GLPI_UPLOAD_DIR: "/var/lib/glpi/files/_uploads"
GLPI_INVENTORY_DIR: "/var/lib/glpi/files/_inventories"
GLPI_NETWORK_REGISTRATION_API_URL: "https://services.glpi-network.com/api/registration/"
GLPI_MARKETPLACE_PLUGINS_API_URI: "https://services.glpi-network.com/api/marketplace/"
GLPI_I18N_DIR: "/usr/share/glpi/locales"
GLPI_VERSION: "10.0.18"
GLPI_SCHEMA_VERSION: "10.0.18@d64066799f068b16ee973b377bdd13f984fe062a"
GLPI_MARKETPLACE_PRERELEASES: false
GLPI_MIN_PHP: "7.4.0"
GLPI_MAX_PHP: "8.4.0"
GLPI_YEAR: "2025"

Libraries
 
htmlawed/htmlawed version 1.2.14 in (/usr/share/glpi/vendor/htmlawed/htmlawed)
phpmailer/phpmailer version 6.8.0 in (/usr/share/glpi/vendor/phpmailer/phpmailer/src)
simplepie/simplepie version 1.5.8 in (/usr/share/glpi/vendor/simplepie/simplepie/library)
tecnickcom/tcpdf version 6.4.4 in (/usr/share/glpi/marketplace/pdf/vendor/tecnickcom/tcpdf)
michelf/php-markdown in (/usr/share/glpi/vendor/michelf/php-markdown/Michelf)
true/punycode in (/usr/share/glpi/vendor/true/punycode/src)
iamcal/lib_autolink in (/usr/share/glpi/vendor/iamcal/lib_autolink)
sabre/dav in (/usr/share/glpi/vendor/sabre/dav/lib/DAV)
sabre/http in (/usr/share/glpi/vendor/sabre/http/lib)
sabre/uri in (/usr/share/glpi/vendor/sabre/uri/lib)
sabre/vobject in (/usr/share/glpi/vendor/sabre/vobject/lib)
laminas/laminas-i18n in (/usr/share/glpi/vendor/laminas/laminas-i18n/src)
laminas/laminas-servicemanager in (/usr/share/glpi/vendor/laminas/laminas-servicemanager/src)
monolog/monolog in (/usr/share/glpi/vendor/monolog/monolog/src/Monolog)
sebastian/diff in (/usr/share/glpi/vendor/sebastian/diff/src)
donatj/phpuseragentparser in (/usr/share/glpi/vendor/donatj/phpuseragentparser/src/UserAgent)
elvanto/litemoji in (/usr/share/glpi/vendor/elvanto/litemoji/src)
symfony/console in (/usr/share/glpi/vendor/symfony/console)
scssphp/scssphp in (/usr/share/glpi/vendor/scssphp/scssphp/src)
laminas/laminas-mail in (/usr/share/glpi/vendor/laminas/laminas-mail/src/Protocol)
laminas/laminas-mime in (/usr/share/glpi/vendor/laminas/laminas-mime/src)
rlanvin/php-rrule in (/usr/share/glpi/vendor/rlanvin/php-rrule/src)
ramsey/uuid in (/usr/share/glpi/vendor/ramsey/uuid/src)
psr/log in (/usr/share/glpi/vendor/psr/log/Psr/Log)
psr/simple-cache in (/usr/share/glpi/vendor/psr/simple-cache/src)
psr/cache in (/usr/share/glpi/vendor/psr/cache/src)
league/csv in (/usr/share/glpi/vendor/league/csv/src)
mexitek/phpcolors in (/usr/share/glpi/vendor/mexitek/phpcolors/src/Mexitek/PHPColors)
guzzlehttp/guzzle in (/usr/share/glpi/vendor/guzzlehttp/guzzle/src)
guzzlehttp/psr7 in (/usr/share/glpi/vendor/guzzlehttp/psr7/src)
glpi-project/inventory_format in (/usr/share/glpi/vendor/glpi-project/inventory_format/lib/php)
wapmorgan/unified-archive in (/usr/share/glpi/vendor/wapmorgan/unified-archive/src)
paragonie/sodium_compat in (/usr/share/glpi/vendor/paragonie/sodium_compat/src)
symfony/cache in (/usr/share/glpi/vendor/symfony/cache)
html2text/html2text in (/usr/share/glpi/vendor/html2text/html2text/src)
symfony/css-selector in (/usr/share/glpi/vendor/symfony/css-selector)
symfony/dom-crawler in (/usr/share/glpi/vendor/symfony/dom-crawler)
twig/twig in (/usr/share/glpi/vendor/twig/twig/src)
twig/string-extra in (/usr/share/glpi/vendor/twig/string-extra)
symfony/polyfill-ctype not found
symfony/polyfill-iconv not found
symfony/polyfill-mbstring not found
symfony/polyfill-php80 not found
symfony/polyfill-php81 not found
symfony/polyfill-php82 in (/usr/share/glpi/vendor/symfony/polyfill-php82)
league/oauth2-client in (/usr/share/glpi/vendor/league/oauth2-client/src/Provider)
league/oauth2-google in (/usr/share/glpi/vendor/league/oauth2-google/src/Provider)
thenetworg/oauth2-azure in (/usr/share/glpi/vendor/thenetworg/oauth2-azure/src/Provider)

Plugins list
 
tag Name: Administración de etiquetas Version: 2.12.2 State: Enabled
Install Method: Marketplace
news Name: Alertas Version: 1.12.4 State: Enabled
Install Method: Marketplace
barcode Name: Barcode Version: 2.7.1 State: Enabled
Install Method: Marketplace
camerainput Name: Camera Input Version: 2.1.0 State: Error / to clean
Install Method: Manual
fields Name: Campos adicionales Version: 1.21.19 State: Enabled
Install Method: Marketplace
behaviors Name: Comportamientos Version: 2.7.3 State: Enabled
Install Method: Marketplace
datainjection Name: Data injection Version: 2.14.1 State: Enabled
Install Method: Marketplace
footer Name: Footer Version: 1.1.1 State: Enabled
Install Method: Manual
formcreator Name: Form Creator Version: 2.13.10 State: Enabled
Install Method: Marketplace
fpwebhook Name: FP Webhook Version: 2.1.0 State: Enabled
Install Method: Manual
gantt Name: gantt Version: 1.1.0 State: Enabled
Install Method: Marketplace
gappessentials Name: Gapp Essentials Version: 2.3.0 State: Enabled
Install Method: Marketplace
genericobject Name: Gestión de objetos Version: 2.14.11 State: Enabled
Install Method: Marketplace
glpiinventory Name: GLPI Inventory Version: 1.4.0 State: Enabled
Install Method: Manual
timelineticket Name: Línea de tiempo de los tickets Version: 10.0+1.2 State: Enabled
Install Method: Marketplace
mailanalyzer Name: Mail Analyzer Version: 3.2.1 State: Enabled
Install Method: Manual
mreporting Name: Más Informes Version: 1.8.7 State: To update
Install Method: Marketplace
metabase Name: Metabase Version: 1.3.3 State: Enabled
Install Method: Marketplace
mydashboard Name: Mi Dashboard Version: 2.1.5 State: Enabled
Install Method: Marketplace
oauthimap Name: Oauth IMAP Version: 1.4.3 State: Enabled
Install Method: Manual
pdf Name: Print to pdf Version: 3.0.0 State: Enabled
Install Method: Marketplace
singlesignon Name: Single Sign-on Version: 1.3.3 State: Enabled
Install Method: Manual
webhook Name: Webhooks Version: 1.0.18 State: Enabled
Install Method: Marketplace
yagp Name: YAGP Version: 2.3.1 State: Enabled
Install Method: Marketplace

@btry
Copy link
Collaborator

btry commented Mar 3, 2025

Hi

Try to do Ctrl+F5 or Ctrl+R to refresh the cache of the browser.

@Servidesk-IaaS365
Copy link
Author

I try do Ctrl+F5 or Ctrl+R several times.
I see two posible errors:
On one hand, I am encountering this error::

base.min.js?v=33bb665e24d8c1f609166c04f6b7bcaa5e207191:186 jQuery.Deferred exception: $(...).masonry is not a function TypeError: $(...).masonry is not a function
at showTiles (https://172.16.0.19/marketplace/formcreator/js/scripts.js?v=7b4676c9d0a2cc7fd48ef5216fe3a6afbf4e24d9:310:38)
at https://172.16.0.19/marketplace/formcreator/js/scripts.js?v=7b4676c9d0a2cc7fd48ef5216fe3a6afbf4e24d9:1253:13
at l (https://172.16.0.19/public/lib/base.min.js?v=33bb665e24d8c1f609166c04f6b7bcaa5e207191:186:25453)
at fireWith (https://172.16.0.19/public/lib/base.min.js?v=33bb665e24d8c1f609166c04f6b7bcaa5e207191:186:26272)
at u (https://172.16.0.19/public/lib/base.min.js?v=33bb665e24d8c1f609166c04f6b7bcaa5e207191:186:27790)
at c (https://172.16.0.19/public/lib/base.min.js?v=33bb665e24d8c1f609166c04f6b7bcaa5e207191:186:27819) undefined

Alternatively, adding this code to formlist.php resolves all errors (masory error on javascript and css):

include ('../../../inc/includes.php');

Session::checkLoginUser();

// Check if plugin is activated...
if (!(new Plugin())->isActivated('formcreator')) {
   Html::displayNotFoundError();
}

if (Session::getCurrentInterface() == 'helpdesk') {
   if (plugin_formcreator_replaceHelpdesk()) {
      Html::redirect('issue.php');
   } else {
      Html::helpHeader(
         __('Form list', 'formcreator'),
         'seek_assistance',
         PluginFormcreatorForm::class
      );
   }
} else {
   Html::header(__('Form list', 'formcreator'));
   echo '<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
   <link rel="stylesheet" type="text/css" href="../css_compiled/styles.min.css">';
}

$form = PluginFormcreatorCommon::getForm();
$form->showList();

if (Session::getCurrentInterface() == "helpdesk") {
   Html::helpFooter();
} else {
   Html::footer();
}

I know this is not the correct way to add CSS or the Masonry library, but it solved the problem. Therefore, I think the issue lies within GLPI's includes or the plugin includes. Does that make sense?

@btry
Copy link
Collaborator

btry commented Mar 3, 2025

It looks like you don't have the library masonry-layout. It is used by GLPI and the plugin should use it.

Could you try this patch ? Apply it then refresh the page.

diff --git a/setup.php b/setup.php
index e055b032..fbe92cfa 100644
--- a/setup.php
+++ b/setup.php
@@ -162,6 +162,10 @@ function plugin_init_formcreator() {
             break;
          }
       }
+
+      if (strpos($_SERVER['REQUEST_URI'], 'formcreator/front/formlist.php') !== false) {
+         Html::requireJs('masonry');
+      }
    }
 
    $CFG_GLPI['javascript']['admin'][strtolower(PluginFormcreatorForm::class)] = ['gridstack'];

@Servidesk-IaaS365
Copy link
Author

Servidesk-IaaS365 commented Mar 3, 2025

i have apply this patch but the problem is not solved

Image

Image

@btry
Copy link
Collaborator

btry commented Mar 3, 2025

The patch should affect the HTML content of the web page by adding this line

<script type="text/javascript" src="/public/lib/masonry.js?v=bb1ef4841c09eda1812210167ca1141de8828aa2"></script>

It is located at the end, see the screenshot below

Image

Could you check you have this line ? You may also want to check the line is not here if you revert the patch

@Servidesk-IaaS365
Copy link
Author

Yes, Only with the patch i have this line

Image

@btry
Copy link
Collaborator

btry commented Mar 3, 2025

could you check in a separated tab that you successfully download that JS code ?

@Servidesk-IaaS365
Copy link
Author

Image

@btry
Copy link
Collaborator

btry commented Mar 4, 2025

Hi

Is the HTTP request exists in the network tab of the developer tools ?

Image

@Servidesk-IaaS365
Copy link
Author

Servidesk-IaaS365 commented Mar 4, 2025

Yes, it is

Image

But we are focused on masonry, and I think the main problem is that GLPI is not including the plugin's CSS.
I added these lines to the plugin code in formlist.php, and the problem was solved. Therefore, I think the issue is with the plugin's or GLPI's specific CSS imports.

} else {
Html::header(__('Form list', 'formcreator'));

echo '<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css_compiled/styles.min.css">';

}

@btry
Copy link
Collaborator

btry commented Mar 7, 2025

Hi

But we are focused on masonry, and I think the main problem is that GLPI is not including the plugin's CSS.

This is possible, as there is indeed some parts broken on the page which are not related to masonry.

Try to rebuild the CSS of the plugin with the CLI command from the root folder of GLPI
bin/console plugin:formcreator:scss then refresh your web page.

@Servidesk-IaaS365
Copy link
Author

It's not working. I tried bin/console plugin:formcreator:scss, but I have the same problem with the CSS.

@btry
Copy link
Collaborator

btry commented Mar 14, 2025

The command creates or rewrite the fine css_compiled/styles.min.css. Can you check the file is actually in your file system ?

Heire is a screen capture of the published archive (I checked it is not missing)
Image

By the way, how did you install the plugin ? From the marketplace ?

@Servidesk-IaaS365
Copy link
Author

I installed the plugin from marketplace an this is my css_compiled:

Image

Image

@btry
Copy link
Collaborator

btry commented Mar 27, 2025

Hi

Check that you have the file formcreator/css/styles.scss.

@Servidesk-IaaS365
Copy link
Author

Yes i have

Image

@btry
Copy link
Collaborator

btry commented Apr 3, 2025

Hi

We did not checked if the browser tries to download scripts.min.css. Could you check in the network tab of developer tools ? Maybe there is an attempt with a HTTP return code greater or equal to 300.

@Servidesk-IaaS365
Copy link
Author

I have not got any 300 :s. I tried to delete plugin, clear plugin data and reinstall but same result

@btry
Copy link
Collaborator

btry commented May 5, 2025

Hi

On my instance, the file is downloaded as expected

Image

Could you try to disable all other plugins to see if the problem persists ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants