Embeded Nextcloud Calendar Header Non Responsive

[ChildLearningClub]

Steps to reproduce

Embed Nextcloud Calendar in Website Using the Code Generated Within Nextcloud Calendar

Expected behaviour

The Header Section Would Also be Responsive on Mobile Devices

Actual behaviour

The Dates Section Scales Properly, But The Header Section Does Not

Server configuration detail

Operating system: Linux 5.4.0-74-generic #83-Ubuntu SMP Sat May 8 02:35:39 UTC 2021 x86_64

Webserver: Apache/2.4.38 (Debian) (apache2handler)

Database: mysql 10.5.9

PHP version:

7.4.20
Modules loaded: Core, date, libxml, openssl, pcre, sqlite3, zlib, ctype, curl, dom, fileinfo, filter, ftp, hash, iconv, json, mbstring, SPL, PDO, session, posix, Reflection, standard, SimpleXML, pdo_sqlite, Phar, tokenizer, xml, xmlreader, xmlwriter, mysqlnd, apache2handler, apcu, bcmath, exif, gd, gmp, imagick, intl, ldap, memcached, pcntl, pdo_mysql, pdo_pgsql, redis, sodium, zip, Zend OPcache

Nextcloud version: 21.0.2 - 21.0.2.1

Updated from an older Nextcloud/ownCloud or fresh install:

Where did you install Nextcloud from: Docker

Signing status

Array
(
)

List of activated apps

Enabled:
 - accessibility: 1.7.0
 - activity: 2.14.3
 - admin_audit: 1.11.0
 - appointments: 1.9.2
 - bbb: 1.4.1
 - calendar: 2.2.2
 - cloud_federation_api: 1.4.0
 - comments: 1.11.0
 - dashboard: 7.1.0
 - dav: 1.17.1
 - deck: 1.4.2
 - documentserver_community: 0.1.9
 - event_update_notification: 1.2.0
 - federatedfilesharing: 1.11.0
 - federation: 1.11.0
 - files: 1.16.0
 - files_pdfviewer: 2.1.0
 - files_sharing: 1.13.1
 - files_trashbin: 1.11.0
 - files_versions: 1.14.0
 - files_videoplayer: 1.10.0
 - forms: 2.2.4
 - gallery: 18.5.0
 - integration_twitter: 1.0.0
 - integration_whiteboard: 0.0.14
 - issuetemplate: 0.7.0
 - logreader: 2.6.0
 - lookup_server_connector: 1.9.0
 - maps: 0.1.8
 - notifications: 2.9.0
 - oauth2: 1.9.0
 - onlyoffice: 7.0.2
 - photos: 1.3.0
 - polls: 2.0.2
 - previewgenerator: 3.1.1
 - privacy: 1.5.0
 - provisioning_api: 1.11.0
 - recognize: 1.3.1
 - registration: 1.2.1
 - serverinfo: 1.11.0
 - settings: 1.3.0
 - souvenirs: 1.1.1
 - spreed: 11.2.2
 - systemtags: 1.11.0
 - talk_simple_poll: 1.3.1
 - text: 3.2.0
 - theming: 1.12.0
 - theming_customcss: 1.8.0
 - twofactor_backupcodes: 1.10.0
 - user_status: 1.1.1
 - video_converter: 1.0.1
 - viewer: 1.5.0
 - weather_status: 1.1.0
 - whiteboard: 0.0.3
 - workflow_script: 1.6.0
 - workflowengine: 2.3.0
Disabled:
 - bruteforcesettings
 - circles
 - cms_pico
 - contacts
 - contactsinteraction
 - dicomviewer
 - drawio
 - encryption
 - files_accesscontrol
 - files_automatedtagging
 - files_external
 - files_markdown
 - files_rightclick
 - firstrunwizard
 - flow_notifications
 - guests
 - impersonate
 - mail
 - metadata
 - nextcloud_announcements
 - password_policy
 - passwords
 - recommendations
 - richdocuments
 - richdocumentscode
 - sharebymail
 - social
 - support
 - survey_client
 - updatenotification
 - user_ldap
 - user_saml
 - workflow_ocr
 - workflow_pdf_converter

Configuration (config/config.php)

{
    "htaccess.RewriteBase": "\/",
    "memcache.local": "\\OC\\Memcache\\APCu",
    "apps_paths": [
        {
            "path": "\/var\/www\/html\/apps",
            "url": "\/apps",
            "writable": false
        },
        {
            "path": "\/var\/www\/html\/custom_apps",
            "url": "\/custom_apps",
            "writable": true
        }
    ],
    "instanceid": "***REMOVED SENSITIVE VALUE***",
    "passwordsalt": "***REMOVED SENSITIVE VALUE***",
    "secret": "***REMOVED SENSITIVE VALUE***",
    "trusted_domains": [
        "share.oilsgift.com",
        "192.168.37.50:444"
    ],
    "datadirectory": "***REMOVED SENSITIVE VALUE***",
    "dbtype": "mysql",
    "version": "21.0.2.1",
    "overwrite.cli.url": "https:\/\/share.oilsgift.com",
    "dbname": "***REMOVED SENSITIVE VALUE***",
    "dbhost": "***REMOVED SENSITIVE VALUE***",
    "dbport": "",
    "dbtableprefix": "",
    "mysql.utf8mb4": true,
    "dbuser": "***REMOVED SENSITIVE VALUE***",
    "dbpassword": "***REMOVED SENSITIVE VALUE***",
    "installed": true,
    "mail_sendmailmode": "smtp",
    "mail_smtpmode": "smtp",
    "mail_smtpsecure": "tls",
    "mail_domain": "***REMOVED SENSITIVE VALUE***",
    "mail_smtpauthtype": "LOGIN",
    "mail_smtpauth": 1,
    "mail_smtphost": "***REMOVED SENSITIVE VALUE***",
    "mail_smtpport": "587",
    "mail_smtpname": "***REMOVED SENSITIVE VALUE***",
    "mail_smtppassword": "***REMOVED SENSITIVE VALUE***",
    "ffmpeg": "\/usr\/bin\/ffmpeg",
    "enable_previews": true,
    "enabledPreviewProviders": [
        "OC\\Preview\\PNG",
        "OC\\Preview\\JPEG",
        "OC\\Preview\\GIF",
        "OC\\Preview\\BMP",
        "OC\\Preview\\XBitmap",
        "OC\\Preview\\Movie",
        "OC\\Preview\\PDF",
        "OC\\Preview\\MP3",
        "OC\\Preview\\TXT",
        "OC\\Preview\\MarkDown",
        "OC\\Preview\\MP4"
    ],
    "simpleSignUpLink.shown": false,
    "filelocking.enabled": true,
    "memcache.distributed": "\\OC\\Memcache\\Redis",
    "memcache.locking": "\\OC\\Memcache\\Redis",
    "redis": {
        "host": "***REMOVED SENSITIVE VALUE***",
        "port": 6379,
        "password": "***REMOVED SENSITIVE VALUE***",
        "timeout": 0
    },
    "loglevel": 2,
    "maintenance": false,
    "updater.release.channel": "stable",
    "app_install_overwrite": [
        "issuetemplate",
        "passman",
        "whiteboard",
        "appointments"
    ],
    "mail_from_address": "***REMOVED SENSITIVE VALUE***",
    "default_phone_region": "JP"
}

Are you using external storage, if yes which one: local/smb/sftp/...

Are you using encryption:

Are you using an external user-backend, if yes which one: LDAP/ActiveDirectory/Webdav/...

Client configuration

Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0 and Google Chrome Version 91.0.4472.106 (Official Build) (64-bit)

Operating system:

Logs

Web server error log

Insert your web server log here 

Nextcloud log

Insert your Nextcloud log here

Browser log

Insert your browser log here, this could for example include:

a) The javascript console log
b) The network log
c) ...

[ranomier]

I have the same problem, please fix :)

Possible related:
#2929
#2561

[jospaeth]

Hi,
sadly the issue still persists and hinders me from using an embedded NC calendar on my website. As shown in the screenshots of the original bug report, a mobile user would not be able to use most of the buttons in the header section.

I'm not a CSS expert, but maybe it would be an option to modify the CSS of #embed-header (should be in css/public.scss) in the following way:
+++ flex-wrap: wrap;
--- height: 44px;
By that, the buttons "wrap over" if the width of the device is too small to show them all (see screenshot below).

[meson11]

@jospaeth Very nice! I put that in custom css:

.app-calendar-public-embedded #embed-header {
   flex-wrap:wrap;
   height: unset !important;
}

And I am happy now. But what is the reason this is not default?

[ranomier]

If i do the above solution and if the screen is narrow enough (on my phone) it uses 3 rows to display the header. The third row then overlays into the Calendar content. In list view it is even worse because you will not see the first list item at all.

Narrow screen:

Even narrower screen:

[meson11]

@ranomier oh, you are right! Haven't seen at first sight. That's a problem, indeed. I'm not a css super hero. Anyone here who can fix this?

[jospaeth]

@ranomier oh yes, also didn't see that 🙈
Unfortunately, I was not yet able to find a quick solution due to missing CSS skills ^^

[jospaeth]

Ok, I have kind of a fix for the overlay. Adding the following custom CSS (in addition to the flex-wrap) solves the problem:

@media (min-width: 390px) and (max-width: 683px) {
    .app-calendar-public-embedded #app-content-vue {
        top: 35px !important;
    }
}

@media (max-width: 389px) {
    .app-calendar-public-embedded #app-content-vue {
        top: 75px !important;
    }
}

WARNING: This is nothing more than an intermediary/quick&dirty solution, and the exact values for the screen widths at which the calendar header is wrapped might differ (I tested with Firefox and Chrome and got the wrap at different values).
In most cases, however, this should add enough padding for the header, dependent on how large its height is.

[ranomier]

Isn't possble to have different css for chrome and firefox, so that the values are the ones you found.

I didn't test it yet

[jospaeth]

Sure, this could be done. But the values will not only depend on the browser, but also on other things like custom font sizes for NC, browser settings, etc.
So I think putting too much effort into optimizing that solution for different systems is not worth it. Would be nice if one could adapt the values dynamically to the actual height of the header. But I don't know if that is possible in CSS.

[ranomier]

Okay thank you! :)

[ranomier]

The issue still stands, any ideas how to solve it? :)