Material Design CSS and DropDown issue

  • Resolved khushbru

    (@khushbru)


    5 years, 2 months ago

    I’ve installed Material Design plugin for the contact form.

    I’m facing the CSS issue in which all the inputs does not have the background and default padding which is there in demo of material design.

    And also in the Number type, when I type the later and focus out of the input, then the label goes back to its original place meaning it goes on the written later.

    The other issue is with Dropdown. In dropdown, the label is not showing.

    I’ve tried to remove all the css and js which can be conflicting the material design but it did not work.

    Please can someone guide me on this issue?

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

    (@contactform7addons)

    Hi @khushbru

    Could you please link me to your website so that I can take a look?

    Thanks,
    Angus

    Thread Starter khushbru

    (@khushbru)

    @contactform7addons
    You can see the contact form at the bottom.

    • This reply was modified 5 years, 2 months ago by khushbru.
    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @khushbru

    It looks like you’re using the legacy styles – those only really exist for compatibility for users who installed the plugin before version 2.0.

    Could you try turning off legacy styles under Contact > Material Design?

    Thanks,
    Angus

    Thread Starter khushbru

    (@khushbru)

    @contactform7addons

    Thank you so much. After turning off the legacy styles, these issues have been solved. ??

    • This reply was modified 5 years, 2 months ago by khushbru.
    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Great!

    Another couple of things I noticed that you could improve because your theme has some slightly conflicting CSS:

    Add this CSS under Appearance > Customize > Material Design Forms > Custom CSS:

    html {
    font-size: 16px;
    }
    #cf7md-form .mdc-text-field__input {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    }
    #cf7md-form .mdc-text-field:not(.mdc-text-field–disabled):not(.mdc-text-field–outlined):not(.mdc-text-field–textarea) .mdc-text-field__input {
    border-bottom-color: rgba(0,0,0,0.42) !important;
    }

    Thanks,
    Angus

    Thread Starter khushbru

    (@khushbru)

    @contactform7addons
    Actually there is another issue occurred after turning of the legacy style.

    In Textfield, the lable’s font-size after floating above, can not be increased.

    Please can you guide me?

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @khushbru

    You should add the CSS I provided above, then you can remove some of the custom CSS you’ve added yourself (like the label font sizes).

    Once you’ve done that, you can edit the label size when floating above by updating the scale value in this following CSS. Try setting it to 0.8 or 0.85. However please note that the current sizing is following Google’s guidelines, and increasing the size will make the label and field values look more squashed.

    #cf7md-form .mdc-floating-label--float-above {
    -webkit-transform: translateY(-50%) scale(.75);
    -ms-transform: translateY(-50%) scale(.75);
    transform: translateY(-50%) scale(.75);
}

    Thanks,
    Angus

    Thread Starter khushbru

    (@khushbru)

    Hi @contactform7addons

    Only text-area’s label be small after floating above. I tried to add your CSS but it did not work.

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @khushbru

    What do you mean by it did not work? How did you try and add it, and what happened when you did?

    Here are the instructions again if you want to give it another try.

    Add this CSS under Appearance > Customize > Material Design Forms > Custom CSS:

    html {
    font-size: 16px;
}
#cf7md-form .mdc-text-field__input {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}
#cf7md-form .mdc-text-field:not(.mdc-text-field–disabled):not(.mdc-text-field–outlined):not(.mdc-text-field–textarea) .mdc-text-field__input {
    border-bottom-color: rgba(0,0,0,0.42) !important;
}

    Thanks,
    Angus

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Material Design CSS and DropDown issue’ is closed to new replies.