初始化后summernote textarea的宽度为0

Question

I have a basic summernote setup in my website that goes something like this:

inputGroupHTML = `
            <div class="screen-item-container">
                <div class="input-group col-lg-12 col-sm-12 col-xs-12">
                    <div class="summernote form-control criteria-field controls" >
                        <p>hi</p>
                    </div>
                </div>
            </div>
            `;

                $(document).ready(function () {
                    $(".summernote").summernote({
                        placeholder: tooltip, toolbar: [
                            ['style', ['style']],
                            ['font', ['bold', 'underline', 'clear']],
                            ['color', ['color']],
                            ['para', ['ul', 'ol', 'paragraph']],
                        ]

                    });
                });

I added some styles for width and height of the textarea, but when it renders it looks like this

with the textarea disappearing.

Checking inspection gives me this:

I'm not sure what caused it so any help would be appreiated. I wont be able to provide all the code since this is company stuff, but I'll try to provide relevant code if needed.

Answer 1

$(".summernote").summernote({
         height: 150,
         placeholder: tooltip, 
         toolbar: [['style', ['style']],
                   ['font', ['bold', 'underline', 'clear']],
                   ['color', ['color']],
                   ['para', ['ul', 'ol', 'paragraph']],
                  ]
});

or try to add width in html

<div class="summernote form-control criteria-field controls" style="height:300px" > 
     <p>hi</p> 
</div>