Outline crossing Text Box outline

Hi @maximilianspitz

Could you please show me your form code? Also, if your site is online, could you send me a link so that I can debug the front end?

Regarding the radios – are you saying you want the radios to be a different colour to the rest of your fields? That would require some custom CSS, which I’m happy to help with, but I will need a link to your site.

Thanks,
Angus

Hey Angus,
first of all thank you for that fast reply!

Of course here you go: https://mietvorsorge.de/antrag-entwurf/

This is the standard code i use:

[md-card]
[md-text label=”Vorname:” outlined=”yes” tabletwidth=”5″ mobilewidth=”3″]
[text Vorname]
[/md-text]

You′re right, for the moment it′s just the radios.
Is there some standard custom css, you just have to adapt that i can change other fields (like text, dropdown, etc…)?

I have an example here.

One more thing.. I use the “label_first” tag for the radios, when refreshing the page i can see the changes but after a second it′s gone.
What′s wrong?

Thanks,

Max

• This reply was modified 5 years, 8 months ago by maximilian.spitz.
• This reply was modified 5 years, 8 months ago by maximilian.spitz.

Hi Max,

Here’s some CSS you can add under Appearance > Customize > Material Design Forms > Custom CSS to fix your first issue (which is just some conflicting theme CSS).

#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

And here’s some more CSS you can add to that to customize the colour of your radio fields. You can change red to any hex colour.

#cf7md-form .mdc-radio::before,
#cf7md-form .mdc-radio::after {
  background-color: red;
}
#cf7md-form .mdc-radio .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle,
#cf7md-form .mdc-radio .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
  border-color: red;
}

Let me know if that works as it should.

Thanks,
Angus

Hey Angus,
thank you so much it work′s like charme!

But why won′t the “label_first” tag work?

And the font in the text field is a bit cut,
how can I make it smaller?

Regards,
Max

Hi Max,

The “label_first” tag doesn’t work because the plugin is only made for the Material Design standard, which is generally with the radio on the left.

Can you send me a link to the page that cut text field is on, and also what browser you’re using?

Thanks,
Angus