[Resolved] Problem aligning custom search fields horizontal

[Author]

Posts

[nicklasK]

I am trying to: align custom search fields horizontal using a grid. I have followed your video instruction (see link:
https://toolset.com/documentation/user-guides/displaying-content-using-grids/) but it does not align correctly. I also get a popup window every time i access the page (front end) with custom search fileds. I am using chrome. The popup says "Troubleshooting information for Views/Content Templates".

Link to a page where the issue can be seen: hidden link

I expected to see: fields and buttons aligned in a perfect horizontal line

Instead, I got: two of the fields "higher up" than the other two.

Any help with this is most appreciated!

Thanks
Nicklas

[Noman]

Hi Nicklas,

Thank you for contacting Toolset support.

1. For the Troubleshoot debug popup, that is coming from View settings. Please go to Toolset >> Settings >> Front-end Content >> Debug mode >> disable Views debug mode from there, screenshot attached.

2nd issue can be adjust with small css or html. I will send that to you in few minutes, please wait I am working on it right now.

Thank you

[Noman]

2. The filter alignment issue is happening because 3rd filter & 4th button does not have any label. Please add the following CSS to your theme’s style.css file or in View’s CSS editor or in Custom CSS section:

.filter-without-label {
    margin-top: 28px !important;
}

In your View filter code, update line #12 with css class name like this:

 <div class="col-sm-6 filter-without-label"><div class="form-group"> 

For submit button, update line #16 with css class name like this:

 <div class="col-sm-2 filter-without-label"> add your submit button shortcode here </div>

This will resolve the alignment issue.

[nicklasK]

Awesome! That worked perfectly! Big thanks for your quick respons and service! 😀

Best regards
Nicklas

[Noman]

Great to hear that I was able to help you, have a great day 🙂 Thank you for the feedback.