Frame/space size on screen

Submitted by loccoli on Wed, 02/14/2018 - 06:43
Forums: 
Content creation

I realise this is probably a stupid question, but...

When creating content with the Moodle plugin, the size of the frame is slightly too large to fit on the screen when you play it (on a desktop PC) - ie the edges are cut off and you need to scroll to get to the 'check' button or similar. Is there any way of getting the frame to fit the screen? I know you can specify the size in px, but this doesn't change the size of the frame in relation to the screen (I think I understand why thanks to some searching on here).

On a mobile the frame is right when vertical, but then cuts off the edges (and doesn't allow zooming) when horizontal - this is a pain as horizontal is better for making the most of the screen space and making it easier to read.

Am I missing something really obvious?

BV52's picture

BV52

Wed, 02/14/2018 - 08:19

Hi loccoli,

Can you please attach screenshots. Also can you please specify which content are you using.

-BV52

loccoli

Thu, 02/15/2018 - 00:26

Hi BV52,

I've attached a couple of screenshots from my desktop. Mobile screen is similar when horizontal because the screen is also a wider ratio than 2:1

Content type includes: quiz (question set) - drag and drop (default frame size is a 2:1 ratio) and course presentation.

I understand that the frame is adjusted for the device - but it's based on the width - so it fits horizontally and then goes too far vertically and requires scrolling to access the full frame (especially navigation buttons). I know in drag and drop I can change the frame size so that the ratio makes for a wider frame (say, 5:2) and that mitigates it, however as far as I can tell, other content types in quiz(question set) don't allow setting the frame size (determined by the content, which makes sense), and the slides in course presentation seem to be fixed at a standard size (it seems 2:1 ratio again). Can you adjust these?

If this is just the way it is, so be it, but my bosses are bothered by not having the frame fit completely onto the screen (it fits if there is something affecting the width, eg. you have the navigation or administration tabs open on the side of Moodle which reduces the width of the space the frame is fitted to)

Btw - Moodle 3.1

 

Attachments: 
Image icon Screenshot edge overlap.PNG
Image icon Screenshot edge overlap2.PNG
Image icon Screenshot edge overlap3- course presentation.PNG
thomasmars's picture

thomasmars

Thu, 02/22/2018 - 14:39

Hi,
Like you mention the height of the activities are based on the width so that they will scale responsively to any device, be it a watch or a projector. If you want to decrease the height of the activity, and want this to be set relative to device you can use a different unit then pixels for specifying the width of the H5P parent container. You can read more about the different units you can specify width in at mdn. If you reduce the width, the height will typically be reduced as well, you can also set a max-height for the parent container, if you wish the height to never exceed 100% of the page for example.

Hope this helps. Best regards, Thomas

CCteach

Fri, 11/20/2020 - 16:19

mdn Makes no sense to me. Could you please explain in layman's terms for us drag and droppers?

loccoli

Thu, 02/15/2018 - 04:02

...and here is a shot from an android mobile on chrome with the same issue

Attachments: 
Image icon Screenshot_2018-02-15-09-43-48.png

rachelgrz

Wed, 04/22/2020 - 18:31

Hello. I have the same issue as Ioccoli. I'm trying to fit the image to a laptop screen so the user doesn't have to drag, scroll the drop. I've attached an image. This 600 x 300 px setting would be perfect but the drag box size depends on the height it seems. When increase the px height the boxes get smaller but the image gets longer which causes the scrolling. 

Is there any way to just change the box size or is it depending on the height of the image?

Attachments: 
Image icon Snag1.jpg

rachelgrz

Wed, 04/22/2020 - 18:35

Is there anyway to change the size of the drag boxes without increasing the px size of the practice box? They seem to be dependent on the height px. As you can see in the attached image, the 600x300 size is perfect but the box sizes are too big. To get the box sizes smaller i have to increase the height px but that causes the image height to increase which put my users in a click drag, scroll and place situation which isn't ideal. 

Attachments: 
Image icon Snag1.jpg
BV52's picture

BV52

Fri, 04/24/2020 - 19:29

Hi rachelgrz,

I'm not sure I follow completely. Are you using the task size option to adjust the size of the drag boxes? It would be a lot easier to adjust the boxes by dragging the their edges.

-BV

[email protected]

Tue, 06/02/2020 - 09:56

Hi

 

I have a problem relating to the same issue.

I have created content that I want the user to able to acces via our moodle app.

The desktop version looks fine, but when I access the app, the frame/space size on the screen does not fit. The size of the frame is too large, so the edges on the screen are cut of and you need to scroll to read text or get to the check button.

 

Do I need to use a fixed frame/screen size?

 

I have included a screen shot and an example

H5P file: 
Binary Data course-presentation-423-888214 (1).h5p
Attachments: 
Image icon IMG_0926.PNG

tim01709

Wed, 06/03/2020 - 15:47

Hi All!

I have a similar issue.

If I add content on moodle cloud directly as h5p, the frame holding the content is a short wide letterbox. Users need to scroll. This happens with a presentation and the multiple choice content.

If I embed the h5p content within a lesson, the content fits to scale, but the gradebook LTI settings don't work and the gradebook is not populated.

 

Is there an easy way to increase the verticle height of the frame holding the h5p content?

 

Thanks in advance!

 

Tim

 

CCteach

Fri, 11/20/2020 - 16:18

mdn makes absolutely no sense to a non programmer. Can you please note in layman's terms for us drag and droppers?

jasimp

Wed, 06/02/2021 - 08:50

i have the same issue

While click the play button in a interactive video session the entire player window get zoomed in and the controls also get disappear

and this is ok with mizilla web browser

 

so how to manage this in chorome or other browser

grackle's picture

grackle

Fri, 06/04/2021 - 17:59

Related: I just want to change the size of the canvas in Course Presentation but can't find the option.  I feel like I've done it before...but where did I find the settings?

otacke's picture

otacke

Fri, 06/04/2021 - 20:41

Are you possibly referring to disabling the navigation bar by switching to the "active surface mode"?

grackle's picture

grackle

Fri, 06/04/2021 - 23:35

No, what I would like to do is make changes to the canvas size (i.e. height and width) in a course presentation.

grackle's picture

grackle

Fri, 06/04/2021 - 23:42

No, what I would like to do is make changes to the canvas size (i.e. height and width) in a course presentation.  Like in other content types (see image).

Attachments: 
Image icon Screen Shot 2021-06-04 at 5.35.58 PM.png
otacke's picture

otacke

Sat, 06/05/2021 - 12:33

Then I highly doubt that you have seen such a setting in Course Presentation before.