Julius'Lab

CSS

(Formidable, CSS) Colocar un campo (frm-first) iniciando en cualquier columna

En un formulario de Formidable, puede colocarse cualquier campo iniciando en cualquier columna, en el grid de 12 columnas.

Suponiendo que quiere colocarse un campo de 4 columnas de ancho, iniciando en la columna 5:

Dar al campo las clases «frm_first frm-push-4»

Esta última es una custom class:

.frm-push-4 {
  grid-column: 5 / span 3!important;
}

Donde en grid-column, es el número de columna donde iniciará el campo, y 3 es el número de columnas que abarcará.

(Formidable, CSS) Colocar un campo (frm-first) iniciando en cualquier columna Leer más »

(Formidable, CSS) Cómo formatear los campos Dropdown dinámicos y sus placeholders

SELECTOR SIMPLE (ELEGIR SOLO UN VALOR)

#frm_form_35_container .chosen-container-single > a { //incluir #frm_form_35_container para formatear todos los dropdowns de un formulario
	height: 32px!important; //modifica y ajusta la altura del campo, 32px funciona bien para los tamaños estándar, "!important" es importante
}

#frm_form_35_container .chosen-container-single > a > span {
	font-size: 16px; line-height:32px!important; // tamaño y alineación vertical del placeholder
}

 
MULTISELECTOR


#field_usr_especialidad_dyn_chosen > ul > li > input { //altura del dropdown (usr_especialidad = nombre del dyn field)
	height: 30px!important;
}

#frm_form_35_container .chosen-search-input {
	font-size:16px!important; // sólo tamaño de la fuente, no he hallado la alineación del placeholder
}

(Formidable, CSS) Cómo formatear los campos Dropdown dinámicos y sus placeholders Leer más »

Crear un botón TOGGLE para mostrar/ocultar de cualquier elemento en Elementor

Crear un botón y asignarle el tag id= showFilterForm (en Avanzado de Elementor).

Crear el elemento (a ocultar/mostrar), normalmente debajo del botón, y asignarle el tag id= hiddenFilterForm (en Avanzado de Elementor).

Poner en la sección CSS correspondiente de Personalizar HTML del tema, la línea: #hiddenFilterForm {display:none;}

Agregar el siguiente Javascript:

<script type="text/javascript">
jQuery(document).ready(function( $ ){

   $('#showFilterForm').click(function() {
   $('#hiddenFilterForm').toggle("slow");
 });
});
</script>

Crear un botón TOGGLE para mostrar/ocultar de cualquier elemento en Elementor Leer más »

(Javascript) Sumar columnas (o celdas cualquiera, o cualquier elemento) en tablas, grids, etc.

<script type="text/javascript">
        var myIVAtotal = 0;
        document.querySelectorAll(".cotRepIVAsum").forEach(
          function(acell){
             var cellvalue= parseFloat(acell.innerHTML);
             if (!isNaN(cellvalue)) {myIVAtotal += cellvalue;}
         }
        );
    document.getElementById('SumaIVA').innerHTML = myIVAtotal.toFixed(2);
</script>

En el caso en que se aplicó, la necesidad era sumar todas las celdas de una tabla producida por base de datos en Formidable, en una Single Entry View. Finalmente, pueden sumarse cualquier cantidad de elementos una vez rendereados en la página.

En el ejemplo, .cotRepIVAsum es el identificador de class de las celdas de la tabla o elementos que se quieran sumar (funciona con div, span, p, etc. cualquier html tag).
document.querySelectorAll(«.cotRepIVAsum»).forEach revisa cada elemento con la clase definida, parseFloat convierte los valores de las celdas (que vienen como texto en el html) a número con decimales. Luego el if(!isNan(cellvalue)) comprueba si es número, si es así, lo suma a myIVAtotal con myIVAtotal += cellvalue y finalmente lo sustituye en cualquier html con tag, en este casi en div id=»SumaIVA».

EJEMPLO CON ANOTACIONES:

<script type="text/javascript">
        var myIVAtotal = 0; //variable para obtener el valor final
        document.querySelectorAll(".cotRepIVAsum").forEach( //revisa todos los elementos con la clase deseada
          function(acell){
             var cellvalue= parseFloat(acell.innerHTML); //obtiene el valor de la celda revisada (parseFloat obtiene número con decimales, parseInt obtiene sólo enteros
             if (!isNaN(cellvalue)) {myIVAtotal += cellvalue;} //checa si no es número, si lo es, procede a agregar el valor a la sumatoria total
         }
        );
    document.getElementById('SumaIVA').innerHTML = myIVAtotal.toFixed(2); //despliega la sumatoria total en cualquier div con ese tag, toFixed(2) redondea a 2 decimales
</script>

(Javascript) Sumar columnas (o celdas cualquiera, o cualquier elemento) en tablas, grids, etc. Leer más »

Alinear imagen y texto dentro de un div tipo tabla

CSS

div.linklist {  /* linklist es el div "padre", cada div.linklist es una fila */
    display:table;
    padding-left:35px; 
    width:100%;
    margin:0px 0; /* you can change/remove margin */
}
div.text{ 
    vertical-align:middle;
    display:table-cell;
    padding:10px;
    text-align:justify;
    font-size:24px;
}
div.linklist .img{
    vertical-align:middle;
    display:table-cell;
    padding-right:5px;
    width:30%; /* you can change width */
}
div.img img{ 
    width:100%;
    height:auto; /* you can change height */
    vertical-align:middle;
}

HTML

  <div class="linklist">
  <div class="img"><a href="enlace"><img src="imagen.png" /></a></div>
  <div class="text"><a href="enlace">USA y Caribe</a></div>
  </div>

Alinear imagen y texto dentro de un div tipo tabla Leer más »