Virtual Classroom(Kaltura Meeting) "Join Meeting" button not visible in KAF Media Gallery

Community Forums General Q&A and Off-Topic
1

Using Kaltura integration with Canvas LMS to access Media Gallery:

After a change where the Kaltura Virtual Classroom join/start meeting button was relocated in the Media Gallery, it is sometimes hidden from the user due to the responsive web view. If the user’s resolution is too low, or browser window is too small, or browser is too far zoomed in, the join/start meeting button cannot be seen. This is common on computers connected to projectors that have a low resolution.
More importantly, this is common on mobile browsers. The screen size for the mobile browsers is causing the button to be hidden by the browser.

This ‘bug’ started when the button was moved from the same row as the +Add Media button, and moved to the top of the screen.

Our campus is very active in using Kaltura Meeting/Virtual Classroom, and this issue has plagued us since mid-August (when I opened a case about it). We’ve posted workarounds everywhere we can (maximize browser, increase resolution, zoom out browser view). But not everyone gets the message, and mobile seems to be out of luck.

Any suggestions? Is this common in all KAF (Canvas) integrations? Is there a fix in sight?

2

Hello @choachy,

Yes. A fix has been committed but I’m afraid I can’t give you a delivery ETA at present. However, there is something you can do pro tem:
KMS and KAF instances enable you to apply custom CSS classes. You can therefore login to the KMS/KAF admin interface and enable the cssupload module and upload an additional CSS file to override the default classes.

For example:

.actions-wrapper.inline.hidden-phone.hostedEnabled.navbar {
    display: inherit !important;
}

Would force the button to appear, irrespective of screen resolution/width.

You can control other visual aspects with this method, naturally, like the button’s colour:

button#accs_contrast {
    background-color: transparent;
    border-color: transparent !important;
    color: gray;
}
button.btn.btn-primary:hover, button.btn.btn-primary:focus, button.btn.btn-small.btn-primary:hover, butto
    border-color: #006878 !important;
    background-color: #006878;
    color: white;
}
.navbar .btn-group .btn, .navbar .input-prepend .btn, .navbar .input-append .btn, .navbar .input-prepend 
    margin-top: 0;
    border-color: #006878 !important;
    background-color: #006878;
    color: white;
}

.actions-wrapper.inline.hidden-phone.hostedEnabled.navbar {
    display: inherit !important;
}

Hope that helps.

Cheers,

2 Likes
3

Thanks. I asked in our case 1-2 months ago if there was a CSS fix we could apply, and never received a response. I’m anxious to give this a try.

4

Well…as I was about to try this, I was doing some final testing, and it looks like they finally pushed out the fix today in the October 12 update. The button no longer hides itself. Well, it still does on a portrait mode phone screen (I’d still like to not see that happen), but at least if you rotate to landscape, it appears.

SUP-23396 [Meetings] The Start Meeting button on Media Gallery now displays correctly on small screens. KAF

5

Hi @choachy,

If you add the above, as per my instructions, it will always appear, regardless of the screen resolution.

1 Like