es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Agregando estilo en línea a componentes

11 Jun, 2023 Programación

Estoy intentando actualizar algunos componentes en AEM para permitir estilos en línea. Por ejemplo, tengo un componente llamado “Row-Dual Column” y estoy perdido en cómo permitir los estilos en línea para este componente. El html de “Row-Dual Column” consiste en:

El código en texto:

<table class="ac_dualColumn" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100% !important;">
    <tr>
        <td valign="top" id="ac-column-left-cell" class="ac-content-cell ac-column-cell" width="50%" style="width: 50%; padding-right: 10px;">
           <div style="margin-bottom: 20px;"> 
              <div data-sly-resource="${'parLeft' @ resourceType='mcm/campaign/components/parsys'}" data-sly-unwrap=""></div>
           </div>
        </td>
        <td>
        </td><td valign=""top"" id=""ac-column-right-cell"" class=""ac-content-cell" ac-column-cell"="" width=""50%"" style=""width:" 50%;="" padding-left:="" 10px;"="">
           <div style="margin-bottom: 20px;">
             <div data-sly-resource="${'parRight' @ resourceType='mcm/campaign/components/parsys'}" data-sly-unwrap=""></div>
           </div>
       </td>
    </tr>
</table>

Si este problema es demasiado para escribir, me encantaría comunicarme por teléfono o correo electrónico.

Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para permitir los estilos en línea para el componente Row-Dual Column en AEM, deberá realizar cambios en el código HTML del componente.

    1. Ubique el atributo de estilo en la etiqueta

    <

    table> y agregue el siguiente código dentro del valor del atributo: style="border-collapse: collapse; width: 100% !important; **all: initial;**".

    1. Reemplace el atributo de estilo existente en las etiquetas con el siguiente código: style="width: 50%; padding-right: 10px; **all: initial;**" y style="width: 50%; padding-left: 10px; **all: initial;**".

    2. En las etiquetas

    <

    div> dentro de las etiquetas

    , reemplace los atributos de estilo existentes con el siguiente código: style="margin-bottom: 20px; **all: initial;**".

    Al agregar all: initial; a los atributos de estilo, se reinician todos los estilos existentes y se permite el uso de estilos en línea.

    Después de realizar estos cambios y guardar el componente, ahora debería poder utilizar estilos en línea para el componente Row-Dual Column en AEM.

Comments are closed.