Pregunta sobre Material Design for Contact Form 7 de Wordpress:

Problema de diseño de contenido CSS y DropDown

Un usuario preguntó 👇

Tengo un plugin de diseño de contenido instalado para el formulario de contacto.

Estoy abordando la pregunta de la SEC de que no todas las entradas existentes para el diseño de contenido no tienen el fondo y el relleno predeterminados.

Y también en el tipo de Número, cuando escribo el más reciente y me centro en la entrada, la etiqueta vuelve a su lugar original, lo que significa que va a escribir más tarde.

El otro problema se refiere a Dropdown. Al caer, la etiqueta no se muestra.

Lo intenté para eliminar todos los css y js que puedan entrar en conflicto con el diseño del contenido pero no funcionó.

¿Alguien puede orientarme sobre esta pregunta, por favor?

(@ contactform7addons)

Hace 1 año, 3 meses

Hola @khushbru

¿Podría vincularme a su sitio web para que lo vea?

Gracias angus

(@khushbru)

Hace 1 año, 3 meses

@ contactform7addons Puede ver el formulario de contacto en la parte inferior de la página.

Esta respuesta fue modificada hace 1 año, 3 meses.

(@ contactform7addons)

Hace 1 año, 3 meses

Hola @khushbru

Parece que está utilizando los estilos heredados; solo son compatibles con los usuarios que instalaron el plugin antes de la versión 2.0.

¿Podría intentar desactivar los estilos heredados en Contacto> Diseño de contenido?

Gracias, Aonghas

(@khushbru)

Hace 1 año, 3 meses

@ contactform7addons

Muchas gracias. Una vez que se extinguieron los estilos heredados, estos problemas se resolvieron. 🙂

Esta respuesta fue modificada hace 1 año, 3 meses.

(@ contactform7addons)

Hace 1 año, 3 meses

¡Excelente!

Algunas otras cosas que he notado que podrías mejorar porque tu tema tiene CSS ligeramente contradictorio:

Hacer este aspecto CSS> Personalizar> Formularios de diseño de contenido> CSS personalizado:

html {tamaño de fuente: 16px; } # cf7md-form .mdc-text-field__input {border-left: none! importante; border-right: ¡ninguno! importante; borde superior: ninguno! importante; } # cf7md-form .mdc-text-field: not (.mdc-text-field-disabled): not (.mdc-text-field – delineado): not (.mdc-text-field – textarea) .mdc- campo-texto__input {borde-color-inferior: rgba (0,0,0,0.42)! importante; }

Gracias, Aonghas

(@khushbru)

Hace 1 año, 3 meses

@ contactform7addons En realidad, hay otro problema después de activar el estilo heredado.

En Textfield, el tamaño de fuente de la etiqueta no se puede aumentar después de flotar arriba.

¿Puedes guiarme por favor?

(@ contactform7addons)

Hace 1 año, 3 meses

Hola @khushbru

Debe agregar el CSS que proporcioné anteriormente, luego puede eliminar algunos de los CSS personalizados que agregó usted mismo (como el tamaño de fuente de la etiqueta).

Una vez que haya hecho eso, puede editar el tamaño de la etiqueta mientras flota por encima de la scale valor en la siguiente SEC. Intente configurarlo en 0.8 o 0.85. Sin embargo, tenga en cuenta que el tamaño actual sigue las pautas de Google y, si aumenta el tamaño, los valores de la etiqueta y el tono se verán más nítidos.

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

Gracias, Aonghas

(@khushbru)

Hace 1 año, 3 meses

Hola @ contactform7addons

Solo la etiqueta del área de texto pequeña ha flotado arriba. Intenté agregar su CSS pero no funcionó.

(@ contactform7addons)

Hace 1 año, 3 meses

Hola @khushbru

¿Qué quieres decir con que no funcionó? ¿Cómo trataste de agregarlo y qué sucedió cuando lo hiciste?

Aquí están las instrucciones nuevamente si quieres intentarlo de nuevo.

Hacer este aspecto CSS> Personalizar> Formularios de diseño de contenido> CSS personalizado:

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;
}

Gracias, Aonghas

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *