My search form fields move each time a field option is selected. I created the form as instructed.
I would like to know why this is happening and how to fix it.
It's happening because a table element is used to layout the filters. Table columns are not fixed width, by default. When you change one of the search filter selections, the column widths respond to the new selection in each select field. If the text in the new selected option has a larger or smaller width than the text in the previous selection, that may result in the column widths shifting. If you want to change that, you can add a fixed width to each column, or you can change from a table structure to a CSS layout structure using more advanced HTML. This is probably required if you want a responsive layout for the filters.
As an example of the first solution, I added a width of 33% to each of the td elements in the first row:
Now the widths of each column are fixed at 1/3 the width of the table, regardless of the width of each select field when the filters update. If you need a more responsive solution, it will require more advanced knowledge of CSS and HTML. Without Bootstrap, it will be somewhat custom.
Christian,
I do not understand. The 3 column form was already perfectly responsive. Now the first three fields in the row are just a fragment of the width on mobile with the ends of field cut off. And this is supposed to be an acceptable solution?
Are you saying that I either have to accept the form jumping all over the width of the page or the first three fields cut off as they are now?
I don't have the advanced coding skills that you say that I need but I do know that I do not want the fields cut off on mobile as they are currently.
I appreciate the effort on resolving the column width movement but for some reason, it restricts the width of the first three fields (the first full table row) on mobile.
As I already said, this will take advanced knowledge of HTML and CSS.
And this is supposed to be an acceptable solution?
As I already said, if you need a more responsive solution, it will require more advanced knowledge of CSS and HTML. If you do not have that, it's time to hire a developer. I can point you to examples and documentation online, but I can already tell that is not going to be sufficient for you. It's time to hire someone.
Hi Christian,
To confirm, if I want the search form columns to retain equal width distribution throughout the search loop, which they currently appear to do, I have to accept the current display width of the first row of fields on mobile?
If so, can you please help me identify the exact issue so I can be prepared?
Thank you.
To confirm, if I want the search form columns to retain equal width distribution throughout the search loop, which they currently appear to do, I have to accept the current display width of the first row of fields on mobile?
If you want to change the column widths, arrangements, and other display / formatting characteristics of the search form filter inputs, someone must apply custom CSS and HTML as needed to effect those changes. There is no automatic format button or feature that will accomplish exactly what you want, there is no Divi Builder-like interface for laying these filters out, and there is no cut-and-paste solution that works for all sites. It requires knowledge of CSS and HTML.
can you please help me identify the exact issue so I can be prepared?
The exact issue is custom HTML and CSS is required to create the specific design you want. You should be prepared to find someone who understands HTML and CSS, experience with Toolset search and WordPress in general as well.
Christian - I am going to close this ticket and readdress my concerns in another ticket. DO NOT RESPOND TO THE TICKET!
I have a legitimate question and I do not appreciate you speaking to me as if I am an ignorant consumer or a child.
Do not pick up my tickets. I'll wait for someone else!!.
