Wavesurfer.js: WaveSurfer won't render in my modal window

[Leisors]

As written in the title, I can't figure why the waveform is not rendering in my modal window.
It is rendering in the main page, but that's just not where I need it.
I thought that could have been a problem determined by the modal being hidden (display: none) at the initialization of WaveSurfer, but making it visible from the beginning does not change a thing.
the #waveform div looks correctly filled and calling the play function does actually work (I can hear it playing but still can't see the waveform).

Any ideas? I'm clueless.
Thanks in advance guys

[mspae]

can you post your code somewhere? Thanks!

[Leisors]

It really is a lot of code, what exactly are you looking for?
As I have written, I assume the initialization of WaveSurfer has been done correctly (since it runs correctly outside of the modal window)

[entonbiba]

@Leisors post the modal code and the wavesurfer init code.

[Leisors]

Allright, this is the modal's code:

    <!-- ALBUMS MODAL -->
    <div id="modal">
        <span id="modal-close-button" onclick="closeModal();">
            <img src="img/icons/menu-close.png" alt="Close">
        </span>

        <img id="arrow-left" src="img/icons/arrow-left.png" alt="Arrow Left">
        <img id="arrow-right" src="img/icons/arrow-right.png" alt="Arrow Right" >

        <div id="albums-wrap">
            <img src="img/locanda-almayer.jpg" alt="Locanda Almayer" id="previous">
            <img class="current" src="img/chiaroscuro.jpg" alt="Chiaroscuro" id="current">
            <img src="img/single-moment.jpg" alt="Single Moment of Life" id="next">
        </div>

        <section id="chiaroscuro-data" class="album-data">

            <div class="waveform-section">
                <div id="waveform"></div>               
                <div id="play-chiaroscuro" class="button-play" onclick="playTrack();">
                    <img src="img/icons/play.png" alt="Play">
                </div>
            </div>

            <div class="text-wrap">
                <p class="description" lang="en">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.modo consequat. dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.modo consequat.</p>
                <div class="extra-info">
                    <p class="year-text">Year:</p> <span class="data year">1980</span>
                    <p>
                        Guitar: <span class="data">...</span><br>
                        Bass: <span class="data">...</span><br>
                        Drums: <span class="data">...</span>
                    </p>
                </div>
            </div>
        </section>

        <div class="section-buttons">
            <button id="buy-chiaroscuro" class="button-buy">BUY THIS ALBUM</button>
            <button id="listen-chiaroscuro" class="button-listen">Listen on SPOTIFY</button>
        </div>
    </div>

and this is the wavesurfer-related code

<script type="text/javascript">
// ...
    var wavesurfer = WaveSurfer.create({
        container: '#waveform'
    });

    wavesurfer.load('audio/chiaroscuro-1.mp3');

    function playTrack() {
        wavesurfer.play();
    }
// ...
</script>

Also, this is how the modal looks like. The waveform should appear under the play button

[katspaugh]

I suspect the issue is that you are rendering the waveform into an invisible container (before the modal window appears). Try either setting the height parameter, or initialize wavesurfer.js after the modal window is opened.

        var wavesurfer = WaveSurfer.create({
        container: '#waveform',
            height: 200
    });

[Leisors]

Shouldn't it have the fillParent parameter default to true?
Setting the height does not change anything, anyway.
I had also tried to wait for the modal to be opened before initializing but made no difference

[mspae]

Is #waveform set to something other than the default display: block; by any chance?

[Leisors]

It is not :/ Here's the relative part of stylesheet (SCSS)

.album-data {
        width: 100%;

        .waveform-section {
            position: relative;
            @include flex-center;

            flex-direction: row;
            width: 100%;
            height: 170px;

            @media #{$mobile} { display: none; }

            #waveform { }

            @include keyframes(glow) {
                0% { box-shadow: 0 0 0 0 $shadow-color-45; }
                50% { box-shadow: $shadow-hard $shadow-color; }
                100% { box-shadow: 0 0 0 0  $shadow-color-45; }
            }

            .button-play {
                @include flex-center;
                position: absolute;

                background-color: rgba(255, 255, 255,  0.5);
                border: 2px solid $color-purple;
                border-radius: 100px;
                padding:  15px;
                height: 30px;
                width: 30px;
                z-index: 11;
                @include animation(glow 5s);
                @include animation-iteration-count(infinite);
                @include transition(background-color 0.5s);

                img { height: 90%; }
                &:hover { background-color: $color-green; } 
            }
        }

"flex-center" is

display: flex;
justify-content: center;
align-items: center;

[entonbiba]

@Leisors here is a working sample, please provide the mixins and set variables for '$mobile' etc... for the scss so we can test it properly. The issue is the scss, and you were missing a '}' in the scss above at the end.
http://codepen.io/entonbiba/pen/EZLJJQ

[mspae]

I added the flex center mixin and the wave ist not shown. If a parent has display: flex; the child elements also have a changed display property. (http://codepen.io/anon/pen/OWZKmq)

Simply add #waveform { width: 100%; } to your code and the waveform should be rendered.

[Leisors]

Oh god, it works, I love you guys.
I had never thought about the display property of a flex child, but that actually makes a lot of sense.

Also, I have one last question for you: I have no idea how the html5 canvas works but I _could not adjust dynamically_ (without refreshing the page) the width of the waveform, not even expressing the width in percentage or vw. Is there any way to do that?

[entonbiba]

@Leisors here you go, resize the window
http://codepen.io/entonbiba/pen/EZLJJQ

[Leisors]

Shiet, you're awesome.
I have no more questions guys, thanks for this

[mspae]

You're welcome!