Config page doesn't render properly and doesn't respond

[notarq]

Issue details

Environment

• wallabag version (or git revision) that exhibits the issue: 2.3.8 (although in composer.json it shows up as 2.3.3, using both git clone or downloading tarball)
• How did you install wallabag?
  git clone;
  sudo -u www-data make install;
  sudo -u www-data bin/console wallabag:install --env=prod
• Last wallabag version that did not exhibit the issue (if applicable): First time install
• php version: 7.4
• OS: Ubuntu 20.04
• type of hosting: Shared
• which storage system you choose at install: MariaDB

Steps to reproduce/test case

Typical install steps, as listed in docs, installed and enabled all PHP modules, successful install and can add articles (currently have 150 of them)

Issues:

The config page doesn't have the dropdowns showing up properly and don't respond. The config page looks like so: https://imgur.com/a/Ua3S16d
As a result, I can't save the Pocket consumer key or change themes (except maybe change it directly with mysql cli).
Also import functions doesn't work for Instapaper CSV, but works for FF Bookmarks.

[j0k3r]

Can you check the console of your browser?

[notarq]

The console only shows one Warning for wallabag.com/config in FF, and nothing in Chromium.

This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”.

What else can I gather from Developer Tools to debug?

EDIT:
In source file rendering sitename.com/config, but I see

<selectid="config_reading_speed" name="config[reading_speed]"

and

<selectid="config_language" name="config[language]">

Should it be <select(spacebar)id=''> instead of <selectid=''>? And if so, which file will I need to change?

[j0k3r]

Could you check the network tab to see if some css aren't loaded?

[j0k3r]

Nothing else?

[notarq]

Only material.css for CSS files
Also material.js, router.js, *.png, *.svg, *.ico

[notarq]

Also, as noted above:

In source file rendering sitename.com/config, but I see

<**selectid**="config_reading_speed" name="config[reading_speed]"
<**selectid**="config_language" name="config[language]">

Should it be

<**select id**=config_reading_speed" name="config[reading_speed]"
<**select id**="config_language" name="config[language]">>? 

And if so, which file will I need to change?

[notarq]

@j0k3r Could you let me know the location of the source file for the config page?
I've been through the various base.html.twig, index.html.twig files in

/var/www/wallabag/src/Wallabag/CoreBundles/Resources/

but can't find the where to change <selectid> to <select id>

[nsitu]

@manthanf1 did you ever find a solution to this? I've got the same issue you described with "select" and "id" apparently missing a space in between them.

[nsitu]

I found that there is a space in the template here:
/wallabag/vendor/symfony/symfony/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig

This space is not respected by the rendering process. When I view the source in the browser I get this:

I found that I could hack this to make it work by hardcoding in an empty class attribute.

It still does not respect the space, but at least the form becomes usable.

Someone with more knowledge of twig/symfony could probably locate the root cause here.

Note: I have seen a similar issue with dissapearing spaces in textarea form fields.

Additional Note: I have further noticed that spaces are not respected in the entry template in the context of a list of CSS classes. This has a destructive effect on the layout. The red highlighted space below is not respected, resulting in class="coll3 m6 s12". It shouldinstead be class="colspacel3 m6 s12"
/wallabag/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig

[notarq]

@nsitu I didn't unfortunately despite tinkering a bit with source files.
Interestingly, same version, same build on wallabag.it (their paid service) doesn't have this issue, so could be compatibiltiy issue in our installation, idk.

On an unrelated note, I have found saving PDF copies of websites (either through extensions or natively from browser) and syncing with NextCloud to be much more reliable means of 'knowledge management'. Has added benefits of annotations and editing PDFs and commenting etc.

[j0k3r]

@nsitu what a great deep dive!
Have you tried to run the master instead of 2.3.8 just to be sure if the bug still exist or not?

[WillPresley]

@nsitu what a great deep dive!
Have you tried to run the master instead of 2.3.8 just to be sure if the bug still exist or not?

Hey @j0k3r, I am currently running from Master with PHP 7.4 and can confirm that both of these 'spaces-not-respected' issues are still happening. The class="" trick works to get the Config page actually working again, but I'm still messing with the col issue in entries.html.twig to see if it can be easily fixed. I'm in no way handy with Twig or Symfony, so I may not make much/any progress.