Change size/width of the search form

This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Tagged: Custom search, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by stephanW-2 6 years, 5 months ago.

Author

Posts

August 17, 2018 at 9:44 pm #1085893

stephanW-2

I am trying to change the width of a search form. I tried "length" and "width" attributes but this doesn't seem to work.

What I am trying to achieve is to place the search button next to the form. Currently, it is placed below the form. Thanks in advance for your assistance.

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
<label>[wpml-string context="wpv-views"]Name of search form[/wpml-string]</label>
[wpv-filter-search-box width='75%' output="bootstrap"][wpv-filter-submit name="Zoek"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

August 18, 2018 at 7:37 am #1086535

Beda

I am not sure what "length" you refer to, I do not know of such CSS rule.
It's usually "width" and "height".
Unless you refer to forms input maxlength attribute?
That is for a amount of character, not size of the input.

The ShortCode attributes of "wpv-filter-search-box" are:
output
style

No widht there, I assume you added that maually?
That will not work

Instead, to add custom style you can use the GUI, and insert it with the custom width applied, for example:
[wpv-filter-search-box output="bootstrap" style="max-width: 100px;"]

Or, If you want to position the Submit Button in the same Row as your Search input, then you use HTML (if you load Bootstrap, you can use their framework).
Example:

<div class="row">
  <div class="col-sm-8">
    <div class="form-group">
	[wpv-filter-search-box output="bootstrap" style="width: 100px;"]
	</div>
  </div>
  <div class="col-sm-4">
	[wpv-filter-submit name="dfsafasfaSubmit" output="bootstrap"]
  </div>
</div>

To conclude:

- always use valid code, and use only the GUI to add/edit ShortCodes
- use HTML of a responsive framework if you need more layouting control

August 18, 2018 at 8:07 am #1086541

stephanW-2

I was not sure which shortcode attributes were available, but thanks to your suggestion I used the Bootstrap styling. This fixed the issue.

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="row">
  
     <div class="form-group">
  <div class="col-xs-8">[wpv-filter-search-box output="bootstrap"]</div>
  <div class="col-xs-4">[wpv-filter-submit name="Search" output="bootstrap"]</div>

  </div>
</div>

[/wpv-filter-controls]

[wpv-filter-end]