Support » Plugin: Material Design for Contact Form 7 » Field Styling – Text disappears when selected

  • Resolved becjacobs

    (@becjacobs)


    Hi There

    When I select the input box in the ‘FAMILY CLASSIFICATION’ section the text disappears. How do I stop that?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @becjacobs

    Your theme is adding some CSS that is causing that. You can override it by adding the following under Appearance > Customize > Material Design Forms > Custom CSS.

    #cf7md-form span.wpcf7-form-control-wrap {
        overflow: auto;
    }

    Thanks,
    Angus

    becjacobs

    (@becjacobs)

    Thanks Angus. I’m still seeing this issue after following your instructions. Is there something I’ve done wrong?

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Sorry, my mistake. Change auto to visible.

    Thanks,
    Angus

    becjacobs

    (@becjacobs)

    No worries, thanks Angus.

    becjacobs

    (@becjacobs)

    Hi Angus, I’m also having an issue on the Credit Card field on the same page where the icon overlaps the numbers. Thanks

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @becjacobs

    Here’s some CSS to fix that.

    #grve-theme-wrapper #cf7md-form .mdc-text-field--with-leading-icon .mdc-text-field__input {
        padding-left: 48px;
    }

    Thanks,
    Angus

    becjacobs

    (@becjacobs)

    Hi Angus – I’m looking at the form on mobile and it has a few issues:
    – Checkboxes don’t align in the ‘Your Needs’ box
    – The ‘parent information’ stacks incorrectly
    – The text area in ‘Family Classification’ box doesn’t wrap
    Thanks
    Rebecca

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @becjacobs

    If you want checkboxes to align, you can set the display attribute to something like columns-3. I recommend using the shortcode generator to help you with this.

    The parent information can be solved by either:

    • Putting all the parent 1 fields on the top half and parent 2 on the bottom (rather than in left and right columns). I’d recommend doing it this way, then you can put a heading over each as well and remove the help text from all of them. OR
    • Using two [md-raw] wrappers (one for each set of parent fields) with width attributes, and putting your fields in them as full-width children. This way, the columns are handled by the [md-raw] tags rather than individual fields, so on mobile they will collapse properly.

    Text areas (and all text fields) don’t allow labels to wrap. This is just how material design works unfortunately (it does have it’s flaws) – and the recommended solution is simply to use shorter labels. If you need the extra information I usually recommend using a short label but adding more explanatory text as help text.

    Thanks,
    Angus

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.