¿Cómo se dimensiona el botón jQuery?

Estoy usando el control del botón jQuery UI pero no soy capaz de ajustar el tamaño (ancho y alto). Aquí está el API documentation. Intenté establecer un atributo STYLE sobre él, pero luego la ETIQUETA no estaba centrada correctamente. Gracias.¿Cómo se dimensiona el botón jQuery?

Fuente

2010-04-27 Alex

Sólo traté de darle un ancho de vía Firebug, Funciona y centros correctamente. – adardesign

El ancho funciona, pero no la altura. Para cambiar la altura, use el relleno y el relleno como se sugiere a continuación. –

Prueba esto en el atributo de estilo:

width: 300px; 
padding-top: 10px; 
padding-bottom: 10px;

$(element).css({ width: '300px', 'padding-top': '10px', 'padding-bottom': '10px' });

Fuente

2010-04-27 18:54:43

Gracias, Jakob. Supongo que la parte que me desconcertó fue que no había una forma incorporada de configurarlo dentro del control Button. En otras palabras, establecería el ancho del botón = "100px" y altura = "25px" y automáticamente calcularía el relleno correcto-superior/inferior para la ETIQUETA. – Alex

¿Fue eso una pregunta? La altura de configuración no funciona porque la etiqueta no está centrada verticalmente en el botón, sino que se compensa con el relleno. Por lo tanto, para establecer una altura diferente, debe usar relleno y relleno. –

No, más de un comentario sobre el control Button. Pero ahora entiendo cómo funciona. Gracias :) – Alex

normalmente:

$(theElement).css('height','...px').css('width','...px');

Fuente

2010-04-27 18:50:24 joanballester

Puede pasar '.css()' un objeto también: '.css ({height: 10, width: 10})' –

Y .height ('Xpx') también (creo) – joanballester

Puede estilo de los .ui-button.ui-widget (sin espacios, debe tener ambas clases). (asegúrese de que su hoja de estilo aparezca debajo de la de jquery ui). También puede diseñar

.ui-button.ui-widget{ 
    height, width 
} 

.ui-button.ui-widget .ui-button-text{ 
    line-height, font-size 
}

Fuente

2011-09-19 03:28:16 scott

Puede el estilo del elemento con tamaño de fuente relativo. Si el botón tiene la clase de atención al cliente al 'buttonStyle' a continuación, añadir esto a la CSS

.buttonStyle{ 
font-size:0.8em; 
}

Fuente

2012-07-13 18:43:55 Usha

encontré que poner <small></small> alrededor de las etiquetas de botón ayuda mucho. Esto solo es beneficioso en ciertos casos, pero me ayudó a reducir el tamaño de un proyecto en el que estaba trabajando.

Fuente

2012-08-22 14:57:53 Savanetech

Poniendo todo alrededor? – aikeru

Solucionado ... tuve que volver a agregar sugerencias para mostrar lo que originalmente dije. – Savanetech

Aquí está mi solución para hacer que el botón de la IU de jquery tenga el mismo ancho. Primero necesito un método para obtener el ancho máximo.

var greatestWidth = 0; // Stores the greatest width 
function getMaxWidth() { 
    var theWidth = $(this).width(); // Grab the current width 

    if(theWidth > greatestWidth) { // If theWidth > the greatestWidth so far, 
     greatestWidth = theWidth;  // set greatestWidth to theWidth 
    } 
}

Luego llamo a este método después de conectar el botón y configurar el tamaño. ejemplo

$('.selector') 
     .button() 
     .each(getMaxWidth); 
    $('.selector').width(greatestWidth);

Fuente

2013-02-26 07:08:01

con sede fuera de esta documentación http://api.jquery.com/height/ el siguiente trabajó para:

$('#mybutton').button({ icons: { primary: "ui-icon-plus" }, text: false}).height(20);

Fuente

2014-12-23 19:48:02

¿Cómo se dimensiona el botón jQuery?

Respuesta

Cuestiones relacionadas