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? :)

[thger1312]

issue exists until today... is there already a common dynamically fix?

[Chepycou]

Ran across this issue while trying to embed a calendar from a Nextcloud instance I do not control (So it's hard to inject CSS code). Is there any known fix/way of applying the CSS suggested by @jospaeth to an iframe? Or any way to inject this CSS as a non-administrative user of the Nextcloud instance through tweaks?

[Nictrical]

Since I had also trouble with the embed-link I ended up using the normal public-share-link. It can be easily embedded using an iframe too and the GUI looks a lot better and is fully responsive!

You will have the option to show different calendars by adding a Token separated by "-". Just like this: https://cloud.example.com/nextcloud/index.php/apps/calendar/p/<token1>-<token2>-<token3>

Ideal iframe options in my opinion: <iframe width="100%" height="1000" style="border:none;" src="https://cloud.example.com/index.php/nextcloud/index.php/apps/calendar/p/<token1>-<token2>/dayGridMonth/now" </iframe>

Be carefully though with keystrokes, since they operate the options like on the normal share page.

[Chepycou]

Not sure what you mean by public share link, looks like that's the one I'm using

[Nictrical]

Hi, sorry for that, I used the wrong link in my comment. I changed it now.

When you copy the entire Embedding-Code it uses the embedding-link (https://cloud.example.com/index.php/apps/calendar/embed/<token>) but if you click on "Public-Share" (https://cloud.example.com/index.php/nextcloud/index.php/apps/calendar/p/<token1>) you will see a different page. If you use the last one inside the iframe, it's getting better like described above.

Feel free to ask further questions. ;)

[Chepycou]

Personally, using this link raises a security error

[Nictrical]

Do you mean you get a security error, or you think it's a risk for security using this link?

[Chepycou]

I tested it and the content security policy prevents the embed. So if you have your own instance I'd say you can probably configure it to allow the embeds, but the one I use does not (probably for valid security reasons)

[Nictrical]

Can you install apps and are you admin in your instance? Then consider using the CSP-Editor-App.

There you can whitelist Domains, which are allowed to embed your Nextcloud instance, so you don't have to worry about security-risks if you only use trusted domains.

[Chepycou]

I am not ^^', else I would already have fiddled with it

[Nictrical]

Ok, I see. Though I hope this helps other people even if its sadly not helping you.