Skip Navigation

[Resolved] Toolset form upload button styled incorrectly on mobile

This support ticket is created 3 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 6 replies, has 2 voices.

Last updated by umbertoZ 3 years, 1 month ago.

Assisted by: Waqar.

Author
Posts
#1954023
1953827-Mobile.jpg
1953827-Captura2.png
1953827-Captura.png

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

#1955527

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#1955773

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

#1955803

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

#1956013

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...

#1956319

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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/

#1956739

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.