[Resolved] view: when I update the page the size of the buttons change

[Author]

Posts

[massimoS527]

I created my search page with view.
URL: hidden link

I want to change the size of the buttons "search -" reset "
with this CSS

input[type=submit] {
  margin-top:5px;
   padding:4px 2px;
   
}

input[type=button]  {
  margin-top:5px;
  padding:4px 2px;

}

I want to change the size of the buttons "search -" reset "
with this CSS, added in the View's CSS editor

but when I go into the page or do a reload, you see the buttons change size: from big to small. Because ?

How do I solve?

[Minesh]

Hello. Thank you for contacting the Toolset support.

Could you please try to add following CSS to your view's CSS box and try to resolve your issue.

input[type=submit] {
  margin-top:5px;
   padding:12px 12px !important;
    
}
 input[type=button]  {
  margin-top:5px;
  padding:12px 12px !important;
 }

[massimoS527]

the problem remains

[Minesh]

could you please share access details so I can check whats going wrong there.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - wp-admin access details you shared with us is not working at this end. Could you please send me working wp-admin access details.

[Minesh]

I've added the same CSS and I can see its working.
=> hidden link

[massimoS527]

I wanted to know where you edited the css, in View I can not find it

[Minesh]

Well - edit your view => navigate to filter editor section => click on CSS editor where you will find the following CSS:

/* bottoni cerca e reset  */

input[type=submit] {
  margin-top:5px;
   padding:12px 12px !important;
    
}
input[type=button]  {
  margin-top:5px;
    padding:12px 12px !important;
  
}

[massimoS527]

the problem remains !
Why do I waste a lot of time to do simple things?

the big buttons are not good!
I need smaller ones

[Minesh]

well - Here is the Doc that will guide you how you can customize your view.
=> https://toolset.com/documentation/user-guides/adding-custom-css-views/

Also - you need to have CSS knowledge to customize your button as per your need. Without having accurate information even about for a small change we are helpless to help you out.

Here is related doc about customizing buttons:
=> hidden link

You should adjust the size of your button using css as per your need.

[massimoS527]

Minesh, I have the knowledge to change a button, the problem is that it increases and decreases. the problem in my opinion is in the CSS panel of view!

as it does not depend on my knowledge I was hoping you could find the problem!
does not depend on the topic, I also tried with the basic wordpress theme

[Minesh]

I've added following CSS to your view's filter sections CSS box:

.btn {
  margin-top:5px;
   padding:5px 5px !important;
    
}

As you can see with the screenshot - I can see the small buttons:
=> hidden link

[massimoS527]

I saw your change, but it does not solve the problem: READ WELL

if I do a reload of the page, the buttons "cerca" "reset" are seen for a moment big and then become small.

is there a bug in view?

[Minesh]

Its not a bug in view but how CSS loads in order - to fix this issue in your specific case - you can even add the style with your button elements:

[wpv-filter-submit name="cerca" output="bootstrap" style="padding:5px 5px !important; margin-top:5px; "]
[wpv-filter-reset reset_label="reset" output="bootstrap" style="padding:5px 5px !important; margin-top:5px; "]
   

[massimoS527]

now works !!! good !
I think it is to be included in your guide. so you can help other users