Time Picker input field dropdown won’t work if set to Display:Inline

  • I’m using Flexible Product Fields by WPdesk to enable shoppers to enter their daily open and closing hours for signage. I’d also like them to be able to use the Time Picker to select their times. I have that all set up and it works great.

    However, instead of having 14 lines above or below Add To Cart, I’d like to put each day on one line. That is, Monday Open and next to that, Monday Close, for example. Then the next day on the next line.

    I’ve added a CSS class for the field and added my CSS code in the Advanced > Customise setting. It’s all perfect except that when I use the code “Display:Inline” the dropdown boxes for the Time Picker stop working and you are unable to click on a day to enter a time manually. (You can only tab to them from an earlier input box to enter manually.) If you try to click on a Time Picker with Inline applied, it jumps over to the next field without CSS code applied.

    I’ve tried the following to see how it affects the input fields:

    1. Comment out the Float – dropdown boxes work again, but this just puts everything back on separate lines as if I wasn’t using CSS at all, with everything at full width.
    2. Comment out the Inline – dropdown boxes work again, but this just puts everything back on separate lines as if I wasn’t using CSS to keep days on one line, while retaining the half-width of elements.

    Please help!

    UPDATE: Is it because the Time Picker when opened takes up more than the space of the Input Field, so when there are two fields one line, the Time Picker things it doesn’t have room to open rather than opening over the top of the other field?

    PS – I’ve tried to attach images but can’t see how to upload anything here.

    • This topic was modified 6 months, 1 week ago by emjay001.
    • This topic was modified 6 months, 1 week ago by emjay001. Reason: Extra information while troubleshooting
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    We do not host uploaded files of any sort in these forums. You can upload images to any public image sharing service such as imgur.com, then place the resulting link here.

    However, images are not all that useful for diagnosing problems like this, they only serve to illustrate what you’re talking about. To properly diagnose a problem, a link to a live page is necessary.

    Lacking such a link, I suspect your update message is on the right track. The inability to click on visible links is often due to transparent layering of elements. A transparent background of an element is blocking access to the underlying element you’re trying to click on. To help identify the problem, use your browser’s element inspector tool to highlight the bounds of various elements. The overlap should become evident. Alternately, set the transparent background of various elements to different semi-transparent colors to help you identify the problem.

Viewing 1 replies (of 1 total)
  • The topic ‘Time Picker input field dropdown won’t work if set to Display:Inline’ is closed to new replies.