[Resolved] How to add class to wpv-sort-order & wpv-sort-order

[Author]

Posts

[chuckH]

Hi. I am creating a custom search form. I am using the View > Filter Editor. I used the Filter Editor to generate Sorting Controls.

How do I add a CSS class to the sorting control generated by the shortcode shown below?

Thanks

[wpv-sort-orderby type="select" options="field-wpcf-last-name,field-wpcf-first-name" label_for_field-wpcf-last-name="Field - Last Name" label_for_field-wpcf-first-name="Field - First Name" orderby_ascending_for="field-wpcf-last-name,field-wpcf-first-name"]

[wpv-sort-order type="select" options="asc,desc" label_for_asc="Ascending" label_for_desc="Descending" label_asc_for_field-wpcf-last-name="+" label_desc_for_field-wpcf-last-name="-" label_asc_for_field-wpcf-first-name="+" label_desc_for_field-wpcf-first-name="-"]

[Luo Yang]

Dear Chuck,

You can setup CSS class name by adding attribute "list_style" into the shortcodes [wpv-sort-order] and [wpv-sort-orderby], for example:
[wpv-sort-order list_style="my-css-class-name" ...]

[chuckH]

Luo, Thank you for the reply. Unfortunately, the solution does not appear to be working.

Here is where I added the parameter shortcode:

[wpv-sort-order list_style="form-control" type="select" options="asc,desc" label_for_asc="Ascending" label_for_desc="Descending" label_asc_for_field-wpcf-last-name="alphabetical: a-z" label_desc_for_field-wpcf-last-name="alphabetical: z-a" label_asc_for_field-wpcf-first-name="alphabetical: a-z" label_desc_for_field-wpcf-first-name="alphabetical: z-a"]

Here is the HTML it generated:

<select name="wpv_sort_order" class="wpv-sort-control-select wpv-sort-control-order js-wpv-sort-control-order" data-viewnumber="12356-TCPID544" data-labels="{"default":{"asc":"Ascending","desc":"Descending"},"field-wpcf-last-name":{"asc":"alphabetical: a-z","desc":"alphabetical: z-a"},"field-wpcf-first-name":{"asc":"alphabetical: a-z","desc":"alphabetical: z-a"}}" autocomplete="off"><option value="asc" selected='selected'>alphabetical: a-z</option><option value="desc" >alphabetical: z-a</option></select>

I would like to add class="form-control" so that I can make use of the CSS Bootstrap form styles.

[Luo Yang]

The attribute "list_style" only takes effect when you use option "Show these options as a dropdown list" , but in your case, you are using "select dropdown" menu, there isn't such a feature to add CSS class into the HTML "select" dropdown within Views plugin, if you agree we can take it as a feature request, our developers will evaluate it, currently I suggest you create a HTML div with CSS class name "form-control", use it to wrap the shortcode [wpv-sort-order], for example:

<div class="form-control">[wpv-sort-order ...]</div>

[chuckH]

Thank you for follow-up. Unfortunately, neither of the solutions worked.

For consistency, I simply wanted to add the Bootstrap 3.x styles (hidden link) for form widgets to the select menus for order (wpv-sort-order) & orderby (wpv-sort-orderby) sorting controls so they match the styles for the filter controls (in this case: wpv-control-postmeta).

Here's the unfortunate quick & dirty hack I used to get it working...

(1) Identify the classes used by the select menu sorting controls:
wpv-sort-order: wpv-sort-control-select wpv-sort-control-order js-wpv-sort-control-order
wpv-sort-orderby: wpv-sort-control-select wpv-sort-control-orderby js-wpv-sort-control-orderby

(2) Identify the Bootstrap CSS styles for .form-control:
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

(3) Add the Bootstrap CSS styles to my View code using the CSS editor screen (View > Filter Editor > CSS editor).

It would be helpful if it were possible to simply add classes via wpv-sort-order/wpv-sort-orderby parameter.