MachForm Community Forums » MachForm 4

1. pkirill
   Member

   Love the product and I'm learning a lot! I do have one suggestion (so far) that I can't seem to work around. That is to remove (or have option to remove) the border and background styling when setting a field to read-only. For example, in one form I need to show the user the we are capturing the date they submit the form. So I use a date field, set it to "today" and check read only. It works perfectly except the user see's it as "selectable" although the can't change it and it causes minor confusion. Another advantage to this would be the ability to add clean inline comments in a form using the single line or multi-line text fields. If there is a way to do this currently using custom CSS, I'd sure appreciate any tips on how to do that. Thanks!

   Posted 8 years ago #
2. 

   yuniar

   It's possible to do so using CSS code. Simply add this CSS code into your theme:

   #main_body .borderless input.text{
     border: none !important;
     box-shadow: none !important;
   }

   and then apply the "borderless" class into your text field.

   ---

   MachForm Founder

   Posted 8 years ago #

3. pkirill
   Member

   Well, that is tremendous! I was trying to do it with CSS but my skills are minimal. Much thanks for the assist! I'm going to assume getting rid of the "MM DD YYYY" and date picker icon from a date field are not quite so easy... :) But, seriously, thanks!

   Posted 8 years ago #
4. 

   yuniar

   That sounds great to hear :-)

   ---

   MachForm Founder

   Posted 8 years ago #

5. pkirill
   Member

   So coming back to it - I thought I would share the final code I came up with to create the borderless date field. Thanks again to Yuniar for the important headstart! It may be messy and there may be a few extraneous items, but it worked for me... It the custom CSS for the date field, you need to put: borderless, nolabel, nopic

   If anyone can offer a cleaner solution - I would welcome it! Thanks!

   /* This removes the border and shadows from the input boxes*/
   #main_body .borderless input.text  {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0px !important;
        padding: 0px 0px 0px 0px !important;
        background-color: #ffffff  !important;
        font-weight:100 !important;
   }
   /*This removes the  "MM DD YYYY" labels from below the input boxes*/
   #main_body .nolabel label{
        display:none !important;
        color:#fff;
   }
   /*This removes the calendar icon*/
   #main_body .nopic div {
        display:none !important;
   }

   Posted 8 years ago #
6. 

   yuniar

   Thanks for sharing this!

   ---

   MachForm Founder

   Posted 8 years ago #

RSS feed for this topic

Reply

You must log in to post.