XF 2.1 codeeditorrow doesn't display right in a modal/tabbed window?

[Jaxel]

I've got a tabbed page:

<div class="block">
    <div class="block-container">
        <h2 class="block-tabHeader tabs" data-xf-init="tabs" role="tablist">
            <xf:foreach loop="$logs" value="$log" key="$key">
                <a class="tabs-tab" role="tab" tabindex="0" aria-controls="{$key}">{$key}</a>
            </xf:foreach>
        </h2>
        <ul class="tabPanes">
            <xf:foreach loop="$logs" value="$log" key="$key">
                <li role="tabpanel" id="{$key}">
                    <xf:codeeditorrow value="{$log}" rowtype="fullWidth noLabel" readonly="true" />
                </li>
            </xf:foreach>
        </ul>
    </div>
</div>

This can have multiple tabs, each one with it's own codeeditorrow. If displayed on it's own page, it works great.

However, if instead of it's own page, it's displayed in a modal window... things get a bit screwy. The first tab shows fine. But any subsequent tabs end up with a "blank" codeeditorrow. If you click on the codeeditorrow, the contents will eventually show up. But you shouldn't have to do this.



Anyone got any ideas on how to fix this? Or is this a XenForo bug? @Mike @Kier @Chris D

 

[Chris D]

Not a bug per se, just something we don’t attempt to handle (because we don’t use code editors in tabs).

What is happening is that the code mirror instance starts initialisation straight away, probably when the overlay opens.

Problem is, the area it renders in is not visible (probably zero height) so the editor instance itself is created but with zero height.

You will likely need to write some custom code to try and defer the initialisation of the code editor until the tab becomes active.

There is one thing which might actually workaround it...

It can be made so that clicking on a tab performs an Ajax request and loads the view in that way.

Theoretically, if these tabs made an Ajax request which returns the template HTML for the editor instance then the editor wouldn’t attempt to initialise until the tab is visible which may welll fix it.

 

[Jaxel]

I guess I can just use a regular textarea... much easier.