New wrapper div for our custom styling for all our custom widgets.

[ryanlabelle]

Can we inject a container above 1st panel-grid-cell and below, panel-row-style?

It would look like this:

<div class=’th-so-container’>

[adiraoco]

Is this the format you would like?

<div class='th-so-container'>
    <div class='panel-grid-cell'>
        <!-- Some themovation widgets -->
    </div>
</div>

[ryanlabelle]

That's right, how you have it is perfect.

[adiraoco]

Implemented in ee999634e85278a5bb34f87151f5983c033ba832

[ryanlabelle]

@teaganm When you are in there next can you confirm this is working as you need it to? Cheers.

[teaganm]

Hi Adi, I just had a look and the placement of the element is good.

What I'm seeing though is the .th-so-container element is being output once for each Themovation widget that is present in a row, so if there are 3 widgets, it's added 3 times: http://grab.by/RlkQ - we'd just like it to appear once only in each row.

Also, right now it looks like the .th-so-container element is only output if a Themovation widget is present in the row. We would like it to always be output once regardless.

Let me know if you have any questions about that. Thank you!

[adiraoco]

@teaganm thanks for pointing out the bug. I'll fix it.

[adiraoco]

@teaganm I have fixed the bugs. Please have a look and let me know if everything is fine now. Thanks.

[teaganm]

Thanks Adi. This is what I'm seeing now:

• the element "panel-row-style" that's either "th-full-width" or "th-full-width-stretch" is currently only being output when a custom background is present. We'd like it to always be output.
• the element "th-so-container" is being added for each column, currently like this:

<div class="panel-grid">
    <div class='th-so-container'>
        <div class='panel-grid-cell'>
            <!-- widget 1 -->
        </div>
    </div>
    <div class='th-so-container'>
        <div class='panel-grid-cell'>
            <!-- widget 2 -->
        </div>
    </div>
</div>

We would like it just once wrapping all columns instead:

<div class="panel-grid">
    <div class='th-so-container'>
        <div class='panel-grid-cell'>
            <!-- widget 1 -->
        </div>
        <div class='panel-grid-cell'>
            <!-- widget 2 -->
        </div>
    </div>
</div>

[adiraoco]

Oh Ok. I thought it was for each .panel-grid-cell. I'll make the change. :)

[adiraoco]

@teaganm fixed it. Please have a look and let me know. Thanks

[teaganm]

Thanks Adi. Looks good, there's just one last thing. We want the container to be inside the panel row style element.

Right now I'm seeing this:

<div class="panel-grid">
    <div class='th-so-container'>
        <div class="th-full-width panel-row-style">
            <div class='panel-grid-cell'>
                <!-- widget 1 -->
            </div>
            <div class='panel-grid-cell'>
                <!-- widget 2 -->
            </div>
        </div>
    </div>
</div>

What we would like is this:

<div class="panel-grid">
    <div class='th-full-width panel-row-style'>
        <div class="th-so-container">
            <div class='panel-grid-cell'>
                <!-- widget 1 -->
            </div>
            <div class='panel-grid-cell'>
                <!-- widget 2 -->
            </div>
        </div>
    </div>
</div>

[ryanlabelle]

Fixed https://github.com/ryanlabelle/themovation-so-widgets-bundle/commit/4dc7baac2b3d8cc45a46a62b602a161cf4384a70

[teaganm]

Hi Adi, in my testing recently I noticed that there is an issue to do with how the 'th-so-container' element is added on sections that are full width (versus full width stretched).

Since it's added with JS, when the page loads initially there is a flash where the content appears totally full width: example

And then it corrects itself to appear how it should: example

Also we're thinking that if there happens to be a JS issue elsewhere on the page it could prevent the container from being added. Do we have another option for this? It would be ideal if we could add it in via PHP.

[teaganm]

I am also seeing another issue which is somewhat related: when I create a page and add a row, the default should be that it shows up 'full width' inside the container, instead of 'full width stretched'. So the elements 'panel-row-style' and 'th-so-container' should be output but are not: example

In order for it to appear that way, I have to go Edit Row, and then under Layout, change the Row Layout select box to "Full Width Stretched", then click Done, and then go back and set it to "Full Width", and then click Done and save the page.

Then the elements show up: example

Can we change that?

[adiraoco]

@teaganm adding elements with PHP would be ideal. I'll try to get it done.