H5P embedded in tabs : text from the button missing in some activities

It is indeed fixed ! Finally I'm not going to use tabs so much because the page is a bit heavy to load then. I use instead the <!-- nextpage --> WP quicktag which allows me to split a post in several pages. It is "mimicking" tabs but the page only load one H5P content at a time, wich is better for my use.

For other users who could struggle with this, here is the way to solve the "H5P truncated buttons when embbeded in tabs" problem :

• First, copy-paste the following code in a file that you will name phpmods.php :

<?php

/**

 * H5P Mods Plugin. 

 * Alters the way the H5P plugin works.

 * @package   H5P

 * @author    Joubel <[email protected]>

 * @license   MIT

 * @link      http://joubel.com

 * @copyright 2015 Joubel

 *

 * @wordpress-plugin

 * Plugin Name:       H5P Mods

 * Plugin URI:        http://www.h5p.org

 * Description:       Overrides the H5P native H5P with your own adjustments.

 * Version:           0.0.1

 * Author:            H5P

 * Author URI:        http://www.h5p.org

 * Text Domain:       h5pmods

 * License:           MIT

 * License URI:       http://opensource.org/licenses/MIT

 * Domain Path:       /languages

 * GitHub Plugin URI: https://github.com/h5p/h5pmods-wordpress-plugin

 */

// If this file is called directly, abort.

if (!defined('WPINC')) {

  die;

}

/**

 * Allows you to alter which JavaScripts are loaded for H5P. This is

 * useful for adding your own custom scripts or replacing existing once.

 *

 * @param object &$scripts List of JavaScripts that will be loaded.

 * @param array $libraries The libraries which the scripts belong to.

 * @param string $embed_type Possible values are: div, iframe, external, editor.

 */

function h5pmods_alter_scripts(&$scripts, $libraries, $embed_type) {

    $scripts[] = (object) array(

      // Path can be relative to wp-content/uploads/h5p or absolute.

      'path' => '/custom-h5p.js',

      'version' => '?ver=1.0' // Cache buster

    );

}

add_action('h5p_alter_library_scripts', 'h5pmods_alter_scripts', 10, 3);

?>

• put this file in a folder that you will name h5pmods and that you will create (using your FTP software) in /wp-content/plugins/
• put a file that you will name custom-h5p.js in /wp-content/uploads/h5p/
• in this file, add the following code. It will work with the WP plugin called WP Post Tabs (https://fr.wordpress.org/plugins/wordpress-post-tabs/) :

(function ($) {

  $(document).ready(function () {

    setTimeout(function () {

          $('a.ui-tabs-anchor').on('click', function (e) {

        H5P.jQuery(window).trigger('resize');

      })

    }, 0);

  });

}( H5P.jQuery ));

• save the file, then go in your wordpress admin > plugins and activate the h5pmods plugin.
• from now on, all your H5P content embedded in the tabs will be resized as it should (see screencap)

Hope this can help others !

Isabelle