Timepicker not displaying correctly on mobile.

[mikequform]

Hello,

I had a problem that I could not select time from timepicker dropdown on mobiles due to the conflict of Uniform script with my theme. So I disabled Uniform on QuForm. Then I got another issue that when I open the form on mobile phone, each timepicker select takes 1 full row of the screen. I found that this was cause by the responsive style codes as below.

@media only screen and (max-width: 767px)
.iphorm-responsive .iphorm-elements .iphorm-element-wrap-text input, .iphorm-responsive .iphorm-elements .iphorm-element-wrap-captcha input, .iphorm-responsive .iphorm-elements .iphorm-element-wrap-password input, .iphorm-responsive .iphorm-elements .iphorm-element-wrap select, .iphorm-responsive .iphorm-elements .iphorm-element-wrap textarea {
width: 100% !important;
min-width: 100px;
}

I know it’s because of this code since when I untick width:100% !important; on the Inspector mode, timepicker is displayed correctly on mobile.

I tried to override this value by creating custom.css as below

@media only screen and (max-width: 767px)
.iphorm-responsive .iphorm-elements .iphorm-element-wrap-text input, .iphorm-responsive .iphorm-elements .iphorm-element-wrap-captcha input, .iphorm-responsive .iphorm-elements .iphorm-element-wrap-password input, .iphorm-responsive .iphorm-elements .iphorm-element-wrap select, .iphorm-responsive .iphorm-elements .iphorm-element-wrap textarea {
width: auto !important;
min-width: auto !important;
}

But somehow that !important code in the style.css gets executed and custom.css cannot override.

Could you guide me how I can solve this?

Thank you.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[mikequform]

That worked like a charm.

Thank you very much!

[Author]

Posts