[Resolved] Form Layout css select

[Author]

Posts

[Alessandro]

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

[Alessandro]

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>

[Christian Cox]

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.

[Alessandro]

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]

[Christian Cox]

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.