[Resolved] View content overlays my spinner overlay

[Author]

Posts

[Tim Elliott]

Hi,

I'm not sure if it's Views or the theme (Divi) that's causing this problem.

If you view this page hidden link you will see I have a view that is split over 2 columns.

The narrow column has a shortcode to bring in the filters:

{!{wpv-form-view name='site-filter-search-test' target_id='self'}!}

The wide column has a shortcode to bring in the search results:

{!{wpv-view name='site-filter-search-test' view_display='layout'}!}

I have a spinner in the filter section using this code:

[wpv-filter-spinner container="div" position="after" class="spinner" spinner="<em><u>hidden link</u></em>"][/wpv-filter-spinner]

The spinner has these classes:

.js-wpv-dps-spinner.spinner {
  padding:30%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:rgba(0,0,0,0.80);
  z-index:99999999;
}

All looks fine on the frontend but when I update a filter value the spinner overlay is above ost of the content but the View search output still shows above the spinner.

If I add the View into the same column, either as a single view with both filter and layout, or as 2 shortcodes as shown above I don't get this problem. See:
hidden link

Any idea why this happens? I want the effect of "spinner-test-2" with the layout of "spinner-test"

I've also tried changing the z-index but no matter how high I raise it the search results still overlay the spinner overlay.

Hopefully it's a simple solution.
Thanks
Tim

[Beda]

I updated your ticket and added code tags to it so to format the code parts of your report.

The fastest for me is if you send me a copy, I can then see what is wrong.
Since the spinner will be within the Search form HTML and as well in another div it may cause a conflict when you split the views into those 2 different parts of the HTML.

I need to play with this locally. Related to you are not sure whether or not this is DIVI; the best method to find out if disabling it.
You could re-create the minimal HTML structure needed and see if that still happens when DIVI is disabled.

I will await your response in private mode.

[Tim Elliott]

Hi Beda

I've found a workaround. I'm still not sure why the et_pb_column class causes this problem, but in this case I can get the output I need by using bootstrap grid elements instead.

I've added the full view (filters and results) into a page using:

{!{wpv-view name='site-filter-search-test-columns'}!}

Then in the view "Filter and Loop Output Integration Editor" I've added:

<div class="row">
  <div class="col-md-4 searchfilters">
      [wpv-filter-meta-html]
  </div>
  <div class="col-md-8">
      [wpv-layout-meta-html]      
  </div>
</div>

Output shown in hidden link

Removes the need for the troublesome et_pb_column class.

Thanks for your help.