The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

Change the width of sound audio bar and transcript

  • brenowers
  • Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 10 months ago #6834 by brenowers
Hi there,

We have a XOT where we have the audio (via the 'sound' function rather than narration) and transcript appear above the main content area on slides. The problem we're facing is that their width is based on the width of the image that is being used on each individual slide, which is usually different, so the audio bar and transcript width are never the same (screenshot attached). Would anyone be able to suggest a way around this?

(We'd quite like to keep the page types the same)

This is my first post here, forgive me if I should have posted in another category.

Best,
Brendan
Attachments:

Please Log in or Create an account to join the conversation.

More
5 years 10 months ago #6838 by ronm
Hi
there's probably a bit of css or script you could use but can you share a link to an example so that we can inspect and suggest a solution?
HTH
Ron

Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/

Please Log in or Create an account to join the conversation.

  • brenowers
  • Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 10 months ago #6839 by brenowers
Hi Ron,

Thanks for the response. Here is a playground link: xerte.cahss.ed.ac.uk/play.php?template_id=1595
from slide 2 onwards.

Best,
Brendan

Please Log in or Create an account to join the conversation.

  • brenowers
  • Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 10 months ago #6840 by brenowers
I should also say I am using JS insertBefore{} to display the transcript and audio above the content.

Please Log in or Create an account to join the conversation.

More
5 years 10 months ago - 5 years 10 months ago #6841 by ronm
Hi Brendan
as well as that you have custom css controlling width and various layout elements etc and the problem is the size of the audio player including it's controls etc is controlled dynamically. That said try the following:
1. Add an optional styles property to the LO icon e.g. the first icon in the tree
2. Add the following css
Code:
/*set the audio player to 100% width*/ .mejs-container { width: 100% !important; } /*prevent the volume slide from wrapping*/ .mejs-controls div.mejs-time-rail { max-width: 80% !important; }
Personally in your example I would also set the transcript div to fill the width and so also add the following:
Code:
/*set the transcript width to 97%*/ #transcript{ width:97% !important; }

HTH
Ron

Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/
Last edit: 5 years 10 months ago by ronm.
The following user(s) said Thank You: brenowers

Please Log in or Create an account to join the conversation.

  • brenowers
  • Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 10 months ago #6842 by brenowers
Hi Ron,
Thanks for taking a look at this. I have applied both of these and got what we're looking for :)
Many thanks!
Brendan

Please Log in or Create an account to join the conversation.

Moderators: JohnSmith
Time to create page: 0.147 seconds
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo