Timepicker

  • Resolved deanes

    (@deanes)


    3 years, 5 months ago

    How to style the timepicker?
    I want to use the time picker on a form designed for dektop screens and have a row containing;
    DatePicker | Timepicker | Number field

    The Timepicker is breaking the hours field and minutes field and stacking them vertically.
    Not a nice appearance to the user.
    How to prevent this and also to reduce the spacing between the Hours field and the Minutes field?
    There is enough width available on the screen if these fields were reduced to a reasonable width for just the 2 required digits in each field and the space between them reduced – they could even be merged since they are part of the same data input(?)
    I have used CSS to reduce the field widths but they still break to a vertical layout in a three column row.

    thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @deanes

    I hope you are doing well.

    I am afraid this will require some custom CSS, can you please try this CSS?

    https://monosnap.com/file/VU3qEhrJe6LSwRaBIM2Br51ULREK8J

    @media only screen and (min-width: 783px) {
  #time-1 .forminator-timepicker .forminator-row{
    display: flex;
    justify-content: center;
  }

#time-1 .forminator-timepicker .forminator-row > div{
    margin-bottom: 0;
    padding: 0 5px;
   }
}

    You can add it to Form > Appearance > Custom CSS

    It may need to update the #time-1 if you use more than one Timepicker field.

    Let us know if this is what you were looking for.

    Best Regards
    Patrick Freitas

    Thread Starter deanes

    (@deanes)

    HI
    Thanks for the quick response – on a Sunday too!
    The css has helped – nothing to be afraid of, I was missing the .forminator-row class.
    I notice there’s a few issues with CSS resolutions like this here in the support forum – perhaps you could collate them and add to your website’s support doco section as CSS Snippets, it may save some queries here?
    thanks again
    Simon

    Plugin Support Williams – WPMU DEV Support

    (@wpmudev-support8)

    Hi @deanes

    I’m glad to know it works for you.

    As for various CSS fixes/tweaks that you can see around here – many of them are quite specific to the site (or even page) the form is on, depending on theme and/or other plugin. Often they are quite specific to the individual site so there would be no point in including them in docs, I think.

    But yes, there are also some that seem pretty “generic” so that might, indeed, be quite a good idea to put them all together in the docs. I’ve already passed your suggestion to our docs team.

    Best regards,
    Adam

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @deanes

    I hope you are doing well and safe!

    We haven’t heard from you in a while, I’ll mark this thread as resolved.

    Feel free to let us know if you have any additional question or problem.

    Best Regards
    Patrick Freitas

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Timepicker’ is closed to new replies.