not displaying all the chapter content

[mignaway]

This is obviously caused by loading only first 2 columns of a section. It can be solved by avoiding that or just modify skip page button to load other columns content by skipping the width of the container.

Problem code

await epubBookContent.getChapter(chapter.id, function (error, text) {
        $('#book-content-columns').html(text);
        var iframe_content = $(`<iframe id="${chapter.id}" scrolling="no" allowfullscreen="true" height="100%" width="100%" style="column-count: 2;-moz-column-count: 2; -webkit-column-count: 2; border: none; visibility: visible;" />`).appendTo($("#book-content-columns").html('')).contents()
        iframe_content.find('head').append('<link rel="stylesheet" type="text/css" href="epubs/' + epubCodeSearch + '/css.css">');
        iframe_content.find('body').append(text);
        iframe_content.find('html').css(
            {"overflow": "hidden",
             "width": $('#book-content-columns').width(),
             "height": $('#book-content-columns').height(),
             "column-fill": "auto",
             "column-gap": "100px",
             "column-width": "400px",
             "column-rule": "1px solid rgba(0, 0, 0, 0.5)"
            });
        iframe_content.find('head').append($("<style type='text/css'>  img { max-width: 100%;}  </style>"));
    });

[mignaway]

Update: i can't get the full content width of iframe's html/body. If i get that i can translate html on skip button until it reach the max width of content (then skip section instead of translate).

[mignaway]

solved with epubjs integration ref: aa98617e33def3b8a7de62cb429448f880d42401