[Resolved] Label for .wpv-view-output

[Author]

Posts

[alistairW-2]

I have been trying to give a search view a CSS label (not sure that is the right term) but can not work out how to?

in the Edit view I have this in the CSS for the view...

.wpv-view-output {
position: absolute;
width:400px;
z-index:999 !important;
}
but it applies it to the other views on the page also (hidden link). How can I give the wpv-view-output a label so I can apply CSS code just to this one view?

[Jamal]

Hello and thank you for contacting Toolset support.

You can add a CSS class or ID to the advanced section of the view's block. Check this screenshot hidden link
Then you can target it in your styles like:

.my-view.wpv-view-output {
    position: absolute;
    width:400px;
    z-index:999 !important;
}

I hope this helps. Let me know if you have any questions.

[alistairW-2]

Hey Jamal

Thanks but I did not make the loop in the block editor rather made it in the View Editor (? where you can enter code) and so when placed on the page I dont get that advanced option you mentioned. I feel like I need to add the CSS class in that but can not work out how?

[Jamal]

Would you allow me temporary access to your website to check this closely? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

I'll need to know another page where the styles should not be applied to check against it.

[Jamal]

The classic views need to be handled differently than the blocks views. Because we don't have how to add the class in the view's div for the classic view, so we need to add our own div and adapt CSS. For example, we can wrap the whole view inside a div like this hidden link
Then, we'll need to adapt the CSS like this:

.my-view .wpv-view-output {
    position: absolute;
    width:400px;
    z-index:999 !important;
}

Please notice the space between ".my-view" and ".wpv-view-output".

[alistairW-2]

Jamal,

Sorry but that did not fix it as much as I thought it would. They key here is the z-index. I am trying to ensure this view appears on top of all else on the page. I wrapped everything in the view in a div as you recommended and added in the ".my-view" and ".wpv-view-output" to the CSS. But it does not give a z-index to the view and the results of the search push everything down on the page. If I remove the comments from the circled code and apply them directly to the wpv-view-output the z-index is set correctly and it works. BUT this is then appleid to every wpv-view-output on the page??

[Jamal]

I am afraid, I am confused, and I don't follow well. Can you add more details to help me? Can you answer the following questions with as many details as possible?
- What is the view to whom you want to apply the styles? Can you add its ID or a screenshot to it?
- What are the other views that should not get the styles applied to them? Can you add their IDs or screenshots to them?

[alistairW-2]

Hey Jamal

Credentials to access site previously provided are still active for you...

So the Content Template called IdvFly uses a number of views. see IdvFly1.jpg. Each view needs different CSS formatting

In this case searchflies2 view is my search option in top right. That search view needs to have a z-index to have it appear over the rest of the page.

In the View Editor for searchflies2 i want to identify/label that view so that i can apply the z-index and probably other formatting too. - JUST TO THAT ONE VIEW
Your solution of wrapping the whole view inside a div in searchflies2 and using '.mysearchview .wpv-view-output' in the CSS did not work (see search.jpg for code used). You can see in IDVFLy2.jpg that the search view has moved all the other page components.

As I stated if I apply the CSS formating to JUST' wpv-view-output' (commented out in search.jpg) the z-index is applied correctly.

Your help is much appreciated. thanks

[Jamal]

I find out the cause of the issue. the "wpv-view-output" is wrapping the view. So, either add the class into the view's block. Or use the "js-wpv-view-layout" instead:

.mysearchview .js-wpv-view-layout {
    position: absolute;
  width:400px; 
  z-index:999 !important;
}