Pequeño truco para las barras de scroll.


(ame) #1

Hola a todos,

 

Pues a quien le interese, aquí os traigo un pequeño truco que me ha parecido interesante compartir con la comuidad, ya que puede ser muy útil, sobre todo si estamos desarrollando alguna aplicación que pueda correr sobre pantallas táctiles como por ejemplo TPVs.

Se trata de aumentarle el grosor a las barras de scroll, tanto de casilleros como de listas, etc. Así resultará muy cómodo presionar con el dedo, ya que el ancho por defecto de este control no es muy adecuado si se hace de esta forma.

Pues bien, vamos allá, el truco consiste en aplicar esta CSS.

 

QScrollBar:vertical {

border: none;

width: 40px;

margin: 30px 0px 30px 0px;}

QScrollBar::add-line:vertical {

/*image: url(down-arrow.png);*/

height: 30px;

subcontrol-position: bottom;

subcontrol-origin: margin;

}

QScrollBar::sub-line:vertical {

/*image: url(up-arrow.png);*/

height: 30px;

subcontrol-position: top;

subcontrol-origin: margin;

}

 

 

 

Fijaos que tenemos una propiedad  "image", la cual nos permite asociar a los botones "flecha arriba" y "flecha abajo" una imagen. De momento lo tengo comentado porque he deciros que no he conseguido mostrar ninguna imagen, he creado incluso objetos "fichero adjunto", pero sigo sin poder aplicarle la imagen al botón, no sé cómo hacerlo funcionar. Si alguien tiene tiempo de probarlo y le sale, estaré encantado de que compartáis también la solución.

Os paso una captura para que veáis como queda:

 

[attachment=9027,884]

 

Saludos.

 

José Luis.

 

 


([N3] blavan) #2

Muchas gracias


([N1] cristianvg2003) #3

Hola, que buen aporte.