[Resolved] Toolset form upload button styled incorrectly on mobile

[Author]

Posts

[umbertoZ]

Hi Christian, I've another problem with the same form. The image upload button ("Hacer Foto") is correctly styled on Desktop, but on the mobile I see the default input button style. I attach some screenshots.

cheers

[Waqar]

Hi,

Thank you for the screenshots.

That button's display is not related to the device type, but, depends on whether a logged-in user is viewing the page or a guest.

When you visit the page as a logged-in user, the file upload button is shown that opens the WordPress media library.

However, when you'll see the same page as the non-logged-in guest, it will show the default file upload field and not the media library button.

I hope this clarifies.

regards,
Waqar

[umbertoZ]

Ok, that's the problem.

On this other website hidden link, I could solve the same issue on the "Adjunta tu CV" button, because it is an "upload file" field and it has a label by default, so I could hide the file input and I styled the label has a button.

The Upload image field hasn't any label or element I can use.

Can you suggest any solution?

thanks

[umbertoZ]

Hey, I found a solution, I've added this JS to use the parent DIV has a button:

jQuery('.wpt-repetitive-field').click(function(e) {
    jQuery(this).find('input[type="file"]').click();
});
jQuery('.wpt-repetitive-field input').click(function(e) {
    e.stopPropagation();
});

Then I styled it with this CSS:

.wpt-repetitive-field {
  min-height: 100px;
  background-color: #02be3c;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wpt-repetitive-field:before {
  content:'HACER FOTO';
}

Now the last problem is that this solution doesn't work when I add more images. How can I trigger the jQuery averytime I add a new imga eupload field?

thanks

[umbertoZ]

Hi, I see that I can still add a label, but it only works as a button for the first instance of my multi images uploader...

[Waqar]

Thanks for the update.

I've performed some tests on my website with a similar image type field and noticed that this CSS only approach works elegantly across multiple devices and browsers:
hidden link

Feel free to adjust the colors and fonts styles as needed and for more ideas and suggestions, you can post this question about effectively styling the file type input field at specialist community forums like:
hidden link
https://stackoverflow.com/

[umbertoZ]

My issue is resolved now. Thank you!