css - Sections invisible until window resize

Question

I cant get sections to work properly, they are invisible until a window resize.

foundation.css:2413 code at this line setting section-container to visibility:hidden I copied the actual code but even examples doesnt work in that containing divs.

<div class="large-8 columns large-centered">                        
    <form class="custom ajaxform" data-validate="parsley" method="post" action="formProcess"> 
        <input type="hidden" name="formtype" value="test" >               
        <fieldset>
            <legend>Test</legend>
            <span class="icon24 icon-close"></span>
            <h4><small>Test</small></h4>
            <?= View::make('forms.header') ?> 
            <h4><small>Test</small></h4>
            <div class="section-container tabs" data-section="tabs">
                <section class="active">
                    <p class="title" data-section-title><a href="#">Test</a></p>
                    <div class="content" data-section-content>
                        <div class="row">
                            <div class="large-4 columns">
                                <label>Test *</label>
                                <input type="text" name="test" data-required="true">
                            </div>                                                                                               
                        </div>
                    </div>
                </section>
                <section>
                    <p class="title" data-section-title><a href="#">test Tab 2</a></p>
                    <div class="content" data-section-content>
                        <div class="row">
                            <div class="large-6 columns">
                                <label>Second *</label>
                                <input type="text" name="second" data-required="true">
                            </div>                                                        
                        </div>                                                        
                    </div>
                </section>
            </div>                
            <div class="row">
                <div class="large-12 columns">
                    <button class="small radius button" style="float:right" type="submit">Submit</button>
                </div>
            </div>      
        </fieldset>
    </form>
</div>

Answer 1

可能是因为您以编程方式添加这些部分。在这种情况下，您需要强制调整大小，以便触发基础以正确绘制它们。

我有同样的问题，快速谷歌搜索后，这将解决它：

$('[data-section]').trigger('resize');

Answer 2

如果 a <div> 不可见，则可能意味着它没有很好地定义高度和宽度。那么渲染一个内容是没有意义的。为了避免这个缺陷，我们必须添加一个高度和宽度。

<div class="section-container tabs" data-section="tabs" style="height: 400px; width : 400px;"></div>

提及您各自的高度和宽度。