[Closed] Form Layout css select

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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Related documentation: WordPress custom search with Toolset

This topic contains 4 replies, has 2 voices, and was last updated by  Christian Cox 4 months ago. The support staff assigned to this topic is Christian Cox.

Viewing 5 posts - 1 through 5 (of 5 total)
Author
Posts
#549109

I am trying to:

Apply my css to a select field in search form

I visited this URL:
hidden link

I expected to see:
The select as my css

Instead, I got:
A predefined css

I would like to completely customize the css of the form

#549111

I would apply css and have something like this:

<select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7">
<option disabled selected> Tipo</option>
<option value="1">Discoteca</option>
<option value="2">Teatro</option>
</select>

#549234

Christian Cox
Forum moderator

Supporter languages: English (English )

Supporter Timezone: America/New_York (GMT-05:00)

Hi, can you tell me your Bootstrap settings in Toolset > Settings > General?
Which styles you want to remove or override? Some of the styles are coming from your theme, so I'm not clear which styles you want to keep and which styles you want to remove. Please be very specific and describe the styles you would like to remove.

#549406

Hi, I bought an html theme named material kit pro. You can see it, also relative to selectpicker, in this link: hidden link

I simply would like to style the "search form" with toolset like the example you can see:

The first two select (zona & tipo) are the final result i would like to obtain.

The third (NOTHING SELECTED) is the current situation.

Bootstrap settings: The theme or another plugin is already loading Bootstrap 3.0

In this case i applied this codes:

Firtst two:

<select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7">
  <option disabled selected> Zona</option>
  <option value="1">Montesacro</option>
  <option value="2">Roma Centro</option>
  <option value="3">Eur</option>
  <option value="4">Ostiense</option>
  <option value="5">Testaccio</option>
  <option value="6">Foro Italico</option>
</select>

<select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7">
  <option disabled selected> Tipo</option>
  <option value="1">Discoteca</option>
  <option value="2">Teatro</option>
</select>

<div class="checkbox">
	<label>
		<input type="checkbox" name="optionsCheckboxes">
		Solo Eventi Gratis
	</label>
</div>

Form View:

[wpv-filter-start] 
[wpv-filter-controls]

[wpv-control-post-taxonomy taxonomy="tipologia-evento" type="select" format="%%NAME%% (%%COUNT%%)" url_param="wpv-tipologia-evento" class="selectpicker"]


[wpv-filter-spinner container="p" position="before" spinner="<em><u>hidden link</u></em>"][wpml-string context="wpv-views"]Aggiornamento Ricerca in corso...[/wpml-string][/wpv-filter-spinner]
[/wpv-filter-controls]

[wpv-filter-end]
#549575

Christian Cox
Forum moderator

Supporter languages: English (English )

Supporter Timezone: America/New_York (GMT-05:00)

Okay I am visually comparing the differences and the only difference I notice is the overall width of the select element - am I correct? Here are a couple of ways to adjust the overall width.

1. To set a specific pixel width, add the following CSS to Layouts CSS & JS:

#demo4 {
  width: 200px;
}

You may adjust the width value by changing the 200 to whatever pixel width you feel is appropriate. This will modify the width of the demo4 container, and the select fields will adjust automatically to fill the space.

2. To specify a responsive width, use the Bootstrap grid system to apply a responsive width class or classes to a wrapper div inside the wpv-filter-controls tags in the Filter Editor section:

[wpv-filter-controls]
<div class="col-md-6 col-sm-12">
  ...your filter control shortcodes here...
</div>
[/wpv-filter-controls]

More about the Bootstrap grid system here:
hidden link

If there are other differences I have overlooked, please let me know and I will help you adjust those.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘[Closed] Form Layout css select’ is closed to new replies.