[Resolved] Editing search view

[Author]

Posts

[kerimF]

Hi there!

So for some reason I'm not able to put the submit and reset button underneath the filter bar. I tried <br> but it's not working. I could really use some advise :). I also want to put the navigation buttons underneath the search results. I really have no idea how to do this. Could you help me a bit along the way? Thanks a bunch :). A link to where the view is: hidden link.

Greetings,

Kerim

[Luo Yang]

Hello,

Thanks for the details, for the middle issue, I have setup a demo in your website:
1) Create a post view "newsearch 2", with 4 columns layout
hidden link
see screenshot: 4-columns.JPG

2) in section "Search and Pagination", wrap the buttons in a div tags:

<div class="row my-center-div">
[wpv-filter-submit output="bootstrap"] [wpv-filter-reset output="bootstrap"]
</div>

click "CSS editor", add below CSS codes:

.my-center-div{
 text-align: center;
}
.my-center-div input[name="wpv_filter_submit"]{
     margin-right: 20px !important;
}

2) In section "Loop Editor", line 20 ~ 22, same as above wrap the codes into a HTML div tag, insert the pagination shortcode as below:

<div class="row my-center-div">
	[wpv-pager-nav-links output="bootstrap" previous_next_links="true"]
</div>

See the result here:
hidden link

Is is only a demo for your reference.

Here is document about text-align:
hidden link

[kerimF]

I don't get it. I can't edit the layout in the current view. Also, I really want to use 3 columns, not 4. So i don't get why i have to turn it into 4. Also, with the last piece of code; you're using this:

<div class="row my-center-div">
[wpv-pager-nav-links output="bootstrap" previous_next_links="true"]
</div>

But with the view I'm using, I see:

<div class="pagination-container">
<ul class="pagination">
<li class="page-item">[wpv-pager-prev-page force="true"][wpml-string context="wpv-views"]«[/wpml-string][/wpv-pager-prev-page]
<li class="page-item">[wpv-pager-next-page force="true"][wpml-string context="wpv-views"]»[/wpml-string][/wpv-pager-next-page]
[wpv-pager-nav-links output="bootstrap" previous_next_links="true"]
</div>
[wpv-filter-end]

You can change the current, good layout as long as nothing is removed. Could you please apply the changes for me?

[Luo Yang]

You are using Bootstrap 3 with Elementor plugin, there might be some conflicts, for example:
Elementor plugin is using their own grid systems, which is different from Bootstrap framework:
hidden link

I have already setup a demo in your website without Elementor for your reference:
hidden link

If you need help to change your original post view "newsearch", please backup your website, then update this thread, I can setup the demo for you tomorrow morning, since I am off today, I am working on GMT +8 timezone.

[kerimF]

Goodmorning Liu,

I made a backup for my site. Do you have everything you need to set up the demo now?

[Luo Yang]

It is afternoon here, I am working on GMT + 8 timezone, and I am checking it in your website, will update here if there is anything found

[kerimF]

Awesome. So you're setting up the demo? I'm still putting my work on the website on on hold till this problem is solved.

[Luo Yang]

There are some problems in your original post view "newsearch"
hidden link
for example:
You are querying the "Evenementen" posts, and filter by taxonomy "Trainers", but this taxonomy does not register to "Evenementen" post, see it here:
hidden link
section "Taxonomies to be used with "

so that taxonomy filter won't be able to work.

so I have cloned it to the new post view "newsearch 2", and done the modifications here:
hidden link

You can see it in front-end:
hidden link

Please check if it is what you want.

Some tips:
1) If you are going to setup Bootstrap grid with Views plugin, you can setup it within Views GUI, for example, in the new post view "newsearch 2":
hidden link
section "Search and Pagination", click button "Grid", see screenshot Grid.JPG

2) In above post view "newsearch 2", section "Search and Pagination", click "CSS editor", you should be able to see all custom CSS codes I have done:

.my-center-div{ /* submit and reset button div */
 text-align: center;
  margin: auto;
  margin-bottom: 10px;
}

.my-center-div input[name="wpv_filter_submit"]{ /* add margin-right to submit button */
     margin-right: 20px !important;
}

.my-center-ul { /* pagination link div*/
  margin: auto;
}

I have added the comments in above CSS codes, for your reference.

3) As I mentioned above, the taxonomy "Trainers" filter won't be able to work, you should be able to see this message:
This View has some query filters that are missing from the form. Maybe you have removed them:
Filter by categorie-trainer-evenement

And finally, you can put above view shortcode into your other pages:
[wpv-view name="newsearch-2"]

[kerimF]

Bro, thank you very much for your help. It's exactly what I wanted :). Just one more question. Let's say I would like to change the layout from to 4 columns, what do I need to change?

[Luo Yang]

You can switch to 4 columns by this:
Edit the view, in section "Loop Editor",click button "Loop Wizard", choose option "Bootstrap grid", you will see an option "Number of columns". see screenshot Number-of-columns.JPG

[kerimF]

My issue is resolved now. Thank you!