He estado usando jQuery UI en el botón más de mi página, sin embargo no he encontrado una forma de evitar lo que parece ser un problema simple. Quiero que algunos de los botones de mi ser más pequeño que el otro, esto debería ser tan simple como la creación de la caja de seguro social el texto del botón para algo como, font: .8em; sin Embargo jQuery UI tiene su elemento de DOM y los 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>

Así que si tengo un <button class="small-button">Small button!</button> jQuery va a colocar el texto en un niño útil. Cualquier tamaño de fuente dada a la small-button clase será ignorado.

Tiene que haber una manera de solucionar esto sin piratería en cómo jQuery hace que sus botones. Alguna idea?

10 Comentarios

  1. 36

    Si es estilo ui-button-text con font-size directamente, puede reemplazar a un nivel superior mediante la aplicación !importante. Tales como:

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

    EDICIÓN: pruebe a establecer un estilo CSS directamente en .ui-button-text para heredar:

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

    Esto también se debe hacer el !importante en la .small-button irrelevante.

    • Este trabajo no lo hizo por desgracia. El pequeño botón de la clase está colgando en el elemento de botón y no sobrescribir el interior útil.
    • Eche un vistazo a mi edición, que podría ayudarle. Sería beneficioso para ver su ejemplo completo en acción (con todo el CSS que se le aplica. Im que va a reunir a la que probablemente está utilizando una interfaz de usuario jQuery archivo CSS para el botón, este problema podría resolverse mediante la modificación de CSS directamente para obtener sus necesidades deseadas.
  2. 14

    Esto ayudó a disminuir la altura del botón para mí (Suavidad tema por defecto es línea-altura del 1.4):

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

    Aquí es lo que yo uso en mis sitios web a la instalación de la fuente-tamaños, de modo que mi tamaños de los botones son los mismos que en el jQuery interfaz de usuario web. Esto funciona porque es exactamente cómo el jQuery interfaz de usuario web hace!

    /* 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;
    }

    Por la configuración de la fuente-tamaño de las propiedades, como que para el elemento body, ajuste el tamaño de fuente para todo lo demás se vuelve trivial como 100% = 10px.

    Sólo mirar hacia fuera para el efecto en cascada cuando el uso de porcentajes – un elemento secundario del 100% que será igual a la del elemento primario de tamaño de fuente.

  4. 5

    Puede crear diferentes tamaños de botones modificando el relleno del elemento span, que está contenido dentro de las etiquetas jQuery genera, como Tim sugiere.

    Este marcado/JavaScript…

    $(document).ready(function(){
        $("button").button();
    });
    
    <button id="some-id" class="some-class">Some Button</button>

    Resultados en la transformación de marcado…

    <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>

    Que ciertamente incluye el id y class etiquetas que fueron suministradas. Usted puede modificar el tamaño de los botones mediante la adición de más de relleno para el span.ui-button-text elemento.

    Como Así..

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

    Acaba de cambiar el botón font-size ;).

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

    Ahora agregue un script jquery para el botón

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

    Buena Suerte. 😉

    • Cuando se utiliza IDENTIFICADOR único del elemento, el input:submit selector es sólo innecesaria sobrecarga..
  6. 3

    He utilizado una combinación de los dos anteriores propuestas. Es bastante fácil de ajustar la interfaz de usuario sólo la manera que me gusta.

    A la página de la hoja de estilos agregar:

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

    Mi solución necesaria para el trabajo a través de los nuevos elementos de menú así

    La primera para seleccionar los elementos coincidentes para ambos menú y botón de

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

    Y el segundo como en el anterior a la fuerza inheiritance

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

    Lo hice y funciona bien.

    $( "button" ).button("font-size", "0.8em");
    • No creo que funcione. He probado con jQuery 1.11.2 y fracasó. Esta debe ser la correcta manera: $( «button» ).botón().css( «font-size», «0.8 em» ) ;
  9. 0

    El uso de jQuery en tiempo de ejecución, sin tener que modificar el CSS. Esto le da mucha más flexibilidad.

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

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

    y mi css:

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

Dejar respuesta

Please enter your comment!
Please enter your name here