Hola Foro
¿Como puedo hacer más grande el cuadradillo de los QCheckBox con CSS?
QCheckBox {
margin: 10px 0px 0px 0px;
border-width: 1px;
border-style: solid;
color: #000;
Muchas gracias
Saludos
Buen día Ramón, que yo sepa como tal el nativo no se puede.
Lo que tienes que hacer es generar 2 (o más) archivos en formato png o gif (por el tema de la transparencia), o svg (que puedes escalar a tu gusto) para mostrarlos en lugar del cuadrito nativo.
Ya con esos archivos creados y adjuntados en tu proyecto, o grabados y exportados en una tabla a la cache del vClient ahora si con CSS puedes cambiar el comportamiento.
Te paso el código css que yo utilizo para tal efecto.
QCheckBox::indicator#ED_VER_IGL {
width: 30px;
height: 30px;
}
QCheckBox::indicator::unchecked#ED_VER_IGL {
image: url(IglG.svg);
}
QCheckBox::indicator:unchecked:hover#ED_VER_IGL {
image: url(IglV.svg);
}
QCheckBox::indicator::checked#ED_VER_IGL {
image: url(IglV.svg);
}
QCheckBox::indicator::checked:hover#ED_VER_IGL {
image: url(IglG.svg);
}
De esta manera controlas los estados de los checkbox y puedes lograr una apariencia verdaderamente llamativa y funcional.
A cada estado le puedes poner una imagen diferente, te anexo ejemplo en imágenes cuando están sin seleccionar y cuando estan seleccionados.
Espero te sirva, saludos.
Precisión,
Efectivamente no se puede hacer más grande el check box nativo, si aumentas el width y el height únicamente aumentarás el espacio entre el cuadro y el texto.
Si usas gif o png se te pueden pixelear, por eso la recomendación de usar svg.
Si ya tienes los íconos en gif o png, te recomiendo convertirlos con boxy svg, es un add on de google chrome que funciona de maravilla, abres el archivo y lo guardas como svg y es todo.
por ejemplo puedes agregar las lineas de tamaña al estado hover para que cuando el cursor este encima se haga más grande, o cambiar el dibujo por otros colores, etc. ahí ya depende de tu gusto.
Hola,
Muchas gracias por la información, solo una pregunta más.
¿Que mejor resolución debe tener el icono? 3232 o 6464 o 128*128
Saludos
Hola
Buenos los iconos los he puesto SVG a 24X24 de resolución.
He seguido y colocado tu código dentro del CSS, pero no consigo que aparezcan en la ventana.
Te dejo algunas imágenes para ver donde no lo hago bien.
En la imagen 1: se muestra la ventana donde tienen que salir los checkbox más grandes, donde pone “Vehículo de Importación” y “Matriculado”, pero no sale nada.
En la imagen 2: se muestra el código CSS
En la imagen 3: Muestra las propiedades del botón de check
Saludos
Buen día Ramón,
Buen día Ramón,
Yo no le pongo contenido en la propiedad Nombre, no sé si tenga que ver, y a cada botón de check le pongo un id diferente.
En la última línea en el nombre de la imagen te falta la extensión.
Revisa si la imagen está en la caché.
Lo del tamaño tú lo vas manejando a tu gusto,
Ahhhh donde tienes : es :: en la primera linea de cada definición
Creo que sería todo.
Saludos.
Hola @aztecmexico
Muchas gracias por tu ayuda, he revisado la extensión de la ultima imagen, he comprobado que las imagenes esten en la caché, y tambíen he pues los dos :: en la primera línea de cada definición. Y a pesar de corregir todo esto, continuó sin poder visualizar los Check.
Te adjunto las imágenes de los check en formato svg, por si los puedes revisar.
¿Se os puede ocurrir que puede ser?
Saludos
Hola Ramon.
Un par de cuestiones:
- El formato SVG en este contexto solo tiene sentido si usas gráficos vectoriales, por lo tanto, es más práctico que uses imágenes en formato PNG y con resolución 64x64px es suficiente.
- Para que las imágenes se carguen correctamente en el CSS deben residir en la carpeta por defecto de Velneo en ese momento.
Si colocas las imágenes en la caché deberás ejecutar inmediatamente antes el comando “Cambiar directorio por defecto (sysCacheClientPath)”.
Si quieres estar seguro que las imagenes son accesibles en el CSS coloca el path completo, por ejem:
image: url(C:/Users/<usuario>/Velneo/cacherun/127.0.0.1/checkbox_unchecked.png) o usas la fórmula
" ... image: url(" + sysCacheClientPath + "checkbox_unchecked.png); ...." o usas la técnica de VErp de sustituir path_imagenes_css_
url(path_imagenes_css_checkbox_unchecked.png)
Puedes practicar este CSS en mis ejercicios “Mis CSS” del cloud, en el Recurso CSS “PS Botón Check y Botón Radio”.
Saludos
Paco Satué
Hola Paco,
Muchas gracia por tus consejos, solo ha hecho falta poner el sysCacheClientPath -> url(" + sysCacheClientPath + "checkbox_unchecked.png); …
y todo ya ha funcionado correctamente.
También he puesto los png, para mi se comportan mejor en la aplicación, que tengo entre manos.
Saludos