javascript - disabled - set width jquery

¿Cambiar el tamaño del botón de la interfaz de usuario jQuery?

Question

He estado usando el botón jQuery UI en toda mi página, sin embargo, no he encontrado una forma de resolver lo que parece ser un problema simple. Quiero que algunos de mis botones sean más pequeños que el otro, esto debería ser tan simple como configurar el CSS del texto del botón a algo así como, font: .8em; Sin embargo, jQuery UI toma su elemento DOM y lo envuelve:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

Entonces, si tengo un <button class="small-button">Small button!</button> jQuery colocará el texto en un espacio para niños. Cualquier tamaño de fuente dado a la clase de small-button será ignorado.

Tiene que haber una forma de evitar esto sin hackear la forma en que jQuery hace sus botones. ¿Algunas ideas?

Answer 1

Esto ayudó a disminuir la altura del botón para mí (el valor predeterminado del tema Suavidad es el alto de línea de 1.4):

.ui-button .ui-button-text
{
 line-height: 1.0;
}

Answer 2

Esto es lo que uso en mis sitios web para configurar los tamaños de fuente para que los tamaños de mis botones sean los mismos que en el sitio web de jQuery UI . Esto funciona porque es exactamente como lo hace el sitio web de jQuery UI .

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

Al establecer las propiedades de tamaño de fuente así para el elemento de cuerpo, establecer el tamaño de fuente para todo lo demás se vuelve trivial como 100% = 10px.

Solo tenga cuidado con el efecto de cascada al usar porcentajes: el 100% de un elemento hijo será igual al tamaño de fuente del elemento principal.

Answer 3

Hice esto y funciona bien.

$( "button" ).button("font-size", "0.8em");

Answer 4

Mi solución también necesitaba trabajar en los nuevos elementos del menú

El primero en seleccionar los elementos coincidentes para el menú y el botón

.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}

Y el segundo como el anterior para forzar la espiritualidad

.ui-button-text {
 font-size: inherit !important;
}

Answer 5

Puede crear botones de diferentes tamaños modificando el relleno del elemento span contenido en el marcado que jQuery genera, como sugiere Tim.

Este marcado / JavaScript ...

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

Resultados en este marcado transformado ...

<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
          ui-button-text-only" id="some-id" role="button" aria-disabled="false">
<span class="ui-button-text">some button</span>
</button>

Lo que sin duda incluye las etiquetas de id y class que se suministraron originalmente. Puede modificar el tamaño de sus botones agregando más relleno al elemento span.ui-button-text .

Al igual que..

button#some-id .ui-button-text {
    /* padding values here to your liking */
}

Answer 6

Si está ui-button-text directamente un ui-button-text con font-size , puede anularlo en un nivel superior aplicando! Important. Como:

.small-button {
   font-size: .8em !important;
}

EDITAR: intente configurar un estilo CSS directamente en .ui-button-text para heredar:

.ui-button-text {
   font-size: inherit !important;
} 

Esto también debería hacer que el! Important en el .small-button irrelevante.

Answer 7

Simplemente cambie el tamaño de letra del botón;).

<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />

Ahora agregue un script jquery al botón

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(''input:submit, #btn2'').button();
        });
    </script>

Buena suerte. ;)

Answer 8

Usé una combinación de dos sugerencias más arriba. Es bastante fácil ajustar la interfaz de usuario de la manera que me gusta.

A la hoja de estilo de la página agregue:

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}

Answer 9

Use jQuery en tiempo de ejecución, sin modificar CSS. Esto te da mucha más flexibilidad.

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});

Answer 10

<input type="submit" value="Mostrar imágenes">

y mi css:

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }