Is there any way to hide the Calendar fields and just leave the calendar icon?

  • Profile Image
    eumiramc
    Asked on November 16, 2016 at 09:53 PM
    is there any way to hide the Calendar fields and just leave the calendar icon
  • Profile Image
    Chriistian
    Answered on November 16, 2016 at 10:20 PM

    Yes, you can use the Mini Date Picker widget for your requirement. Simply add the Mini Date Picker widget to your form and add the CSS below to the Custom CSS area of the widget:

    input#datepicker {

        display: none;

    }

     

    Here's how it should look after:

    If you need further assistance, please let us know.
    Regards.

  • Profile Image
    eumiramc
    Answered on November 20, 2016 at 08:35 PM

    Excellent! However, I see that there is a big space (I think) between the Date label and the icon, could you help me fix that?

  • Profile Image
    Chriistian
    Answered on November 20, 2016 at 10:27 PM

    You can inject this custom CSS to your form to reduce the width of the Date label on your Test Table form. This should make the label closer to the icon. Please follow this guide on How to Inject Custom CSS Codes.

    #label_17 {

        width: 35px !important;

    }

    May I also suggest to add some instruction to the form so your users know they can select a date using the calendar icon. Otherwise, they might not now that they can select a date using that icon.

    Please let us know if you have further questions.
    Regards.

  • Profile Image
    eumiramc
    Answered on November 20, 2016 at 10:49 PM

    Hi! Thank you very much! Thanks for your suggestion.

     

    Can I say something? Where do you configure/adapt so easily the CSS? Is that I don't know where to start and I don't know if you have a real time CSS editor for doing it.

  • Profile Image
    Chriistian
    Answered on November 21, 2016 at 12:14 AM

    You are most welcome. You can use our Advanced Designer to setup your CSS and see the changes applied to your form immediately.

    To use the Advanced Designer, click the Design button on the form builder.

    Then click Advanced Designer.

    On the Advanced Designer page, click the CSS tab. You can then input the CSS that you want to apply to the form. Once the CSS is added, the changes should be visible on the form.

    You can also check this guide for more information on the advanced designer: Form Designer Tutorial: Let's create fantastic forms!

    Cheers.