[Résolu] Cannot assign css class to seach and reset button

[Auteur]

Publications

[Daniel Stadeli]

Tell us what you are trying to do? For a view in blocks, I want to assign a custom class "button" to the search and reset button, so they will have the default theme behavior and design and not a Toolset internal design.

If I use the Toolset way of assigning a class (click on submit button > Advanced > CSS Classes) the whole cell is marked with the class (blue) instead of the button itself.
I don't understand why the "Clear all filters" is displayed as a text and not as a button, it doesn't look nice to have different styles. I want to assign the class to "clear all filters" as well, same thing, the blue stretches the whole width of the cell, rather than only the text.

I cannot switch to HTML on either of these items. Otherwise I could solve this myself easily.

Is there any documentation that you are following? https://toolset.com/forums/topic/cant-seem-to-edit-the-submit-button-on-form-with-css/

Is there a similar example that we can see? lien caché

What is the link to your site? lien caché

Thanks.
Daniel

[Waqar]

Hi Daniel,

Thank you for contacting us and I'd be happy to assist.

I can understand your concern and it would be useful to be able to apply the custom classes to the submit and reset buttons directly.

Appreciate you shared your feedback and I'll share this internally with the concerned team.

For now, a workaround can be to include some custom script in the view's "Custom JS" field, to apply a certain class ( for example "button" ) to the submit and the reset buttons:

jQuery( document ).ready(function() {
	// add some class to submit and reset buttons
	jQuery('input.wpv-submit-trigger').addClass('button');
	jQuery('input.wpv-reset-trigger').addClass('button');
});

Note: If you'd also like to remove the default classes from these buttons for styling purposes, you can use:

jQuery( document ).ready(function() {
	// add some class to submit and reset buttons
	jQuery('input.wpv-submit-trigger').addClass('button');
	jQuery('input.wpv-reset-trigger').addClass('button');
	
	// remove the default classes from submit and reset buttons
	jQuery('input.wpv-submit-trigger').removeClass('wpv-submit-trigger js-wpv-submit-trigger');
	jQuery('input.wpv-reset-trigger').removeClass('wpv-reset-trigger js-wpv-reset-trigger');
});

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[Daniel Stadeli]

Thanks Waqar, your solution is awesome! I used the second script and now these buttons have the standard theme button style. Thanks a lot!