elementos de interfaz de usuario jQuery demasiado grande

Aquí está la página en cuestión: http://bit.ly/m5cyjx elementos de interfaz de usuario jQuery demasiado grande

No hay casi ningún código o el peinado. Parece que los elementos de la interfaz de usuario de jQuery (en este caso, seleccione el botón del menú &) son demasiado grandes. Por defecto, deberían ser bastante pequeños, no mucho más altos que la altura máxima de esta oración.

He tomado el CSS jQuery UI directamente desde su sitio web, y he tomado el jQuery select menú CSS del sitio web del creador de ese proyecto. Incluso con el código predeterminado, no hay cambios en el problema.

¿Algún ayuda?

Editar Además, no hay flechas a la derecha del menú de selección, ya que debe haber por defecto. Echar un vistazo a la página del proyecto: http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Fuente

2011-06-13 AKor

¿Qué navegador está usando? Me parece bien en Firefox 4. –

Debe agregar un restablecimiento de CSS para que el tamaño no dependa del valor predeterminado del navegador (especialmente porque la hoja de estilo de la interfaz de usuario de jQuery usa "em") – kei

La mayoría de los problemas pueden resolverse fácilmente analizando qué Firebug (en Mozilla Firefox) o Herramientas de desarrollador (en Google Chrome) están mostrando. Esta es una combinación de tu estilo actual + estilo personalizado de jQuery UI + falta de imágenes requeridas, etc. – Tadeck

Esto se debe a lo siguiente estilo (style.css, la línea # 10):

#main { 
    margin-top: 25px; 
    text-align: center; 
    font-size: 25px; 
}

Usted tiene tamaño muy grande para la fuente de #main, y debido a que jQuery UI hereda correctamente otros estilos, los botones también son grandes.

Cambiar el código anterior en el siguiente y se verá mejor (al menos botones):

#main { 
    margin-top: 25px; 
    text-align: center; 
    font-size: 10px; 
}

Fuente

2011-06-13 17:06:49 Tadeck

Intenté jugar con eso, pero nunca se acerca a este aspecto: http://jqueryui.com/demos/button/ Incluso intenté sacar todas las hojas de estilo, y todavía no se parece al ejemplo. – AKor

@Sennheiser Use Firebug (en Firefox) o Herramientas de desarrollador (en Google Chrome) para verificar qué estilos se aplican a los botones e investigar el problema de esa manera. El problema con el tamaño de los botones se puede resolver fácilmente con la solución que te di más arriba. Si tiene alguna pregunta adicional, hágamelo saber. – Tadeck

Tadeck - Mi problema es que, incluso sin ningún estilo personalizado, los botones aparecen de forma muy diferente a como lo hacen en el sitio web de jQuery UI. – AKor

Las dos reglas CSS que controlan los tamaños son

Línea 424 de jquery-ui.css

input.ui-button { 
    padding: .4em 1em; 
}

y la línea 59 de jquery-ui.css

.ui-widget { 
    font-family: Segoe UI, Arial, sans-serif; 
    font-size: 1.1em; 
}

Ajuste el relleno y el tamaño de la fuente hasta que se vea cómo quiere que se vea.

Fuente

2011-06-13 17:06:14

elimina la clase ui-widget.

i que el patrón es

<div class="ui-widget"> 
    <div class="ui-widget-header"> 
    </div> 

    <div class="ui-widget-content"> 
    //your button could go here 
     <div class="ui-button">click me</div> 
    </div> 
</div>

Fuente

2011-06-13 17:06:46 orolo

me encontré con que en allí las páginas de interfaz de usuario que tienen el código CSS:

body { fuente tamaño: 62.5%; }

por lo que reducen en gran medida el tamaño de su fuente. Poner esto en su página podría resolver el problema, funcionó para mí.

Fuente

2011-07-01 02:34:29 steve

La mayoría de los temas de ThemeRoller hacen esto para poder hacer la conversión: '1em = 10px' https : //forum.jquery.com/topic/adjust-button-size#14737000000744502 – m33lky

Sí. No entiendo por qué este es el valor predeterminado en JQuery UI. No creo que alguien quiera botones tan grandes.

Así es como lo resuelvo. Agregue esto al <cabeza> del archivo html.

<style type="text/css"> 
    /* make default button size sane */ 
    .ui-button-text { 
     font-size: .6em; 
    } 
</style>

Fuente

2011-09-30 00:47:11 TrophyGeek

Definitivamente la solución más fácil. ¡Funciona perfectamente! – olofom

¡Muchas gracias! – MirlvsMaximvs

Me acaba de pasar a tropezar con este, pero trate de añadir el html DOCTYPE a su documento

<!DOCTYPE html> 
<html> 
    <body> 
    </body> 
</html>

antes de que su etiqueta de apertura html.

Fuente

2012-10-03 13:44:07 Michael

@Tadeck estaba teniendo un problema similar, y cambiar el tamaño de la fuente hizo el truco :) ¡gracias!

también, antes de leer esto, estaba tratando de ver si cambiaba el tamaño de las fuentes del contenido interno trabajado, pero por las razones que describo a continuación, no fue así. (Así que no hacer lo que hice! = P)

script que llama a las pestañas jQuery funcionan para hacer que las pestañas

$(function() { 
    $("#tabs").tabs(); 
});

marcado el guión necesita construir las pestañas

<div id="content-wrapper"> 
    <div id="tabs"> 
    <ul> 
     <li><a href="#tabs-main">Dashboard</a></li> 
     <li><a href="#tabs-stuff"> Other Stuff </a></li> 
    </ul> 
    <div id="tabs-main"> 
     <!-- where i put unformatted content, like headers and description paragraphs --> 
     <div> formatted inner content here (for graphs/visual content/tables/etc) </div> 
    </div> 
    <div id="tabs-stuff"> 
     <!-- where i put unformatted content, like headers and description paragraphs --> 
     <div> formatted inner content here (for graphs/visual content/tables/etc) </div> 
    </div> 
</div> 
</div>

Resulta que establecer los estilos en línea para divs dentro de cada tabulación div no cambia el tamaño de las pestañas. Tuve que cambiar el tamaño de la fuente para la clase .ui-widget en el archivo css que se generó a partir del tema jQuery UI que lancé. y cambiar la hoja de estilos de la interfaz de usuario realmente no es necesario, ya que puede establecer los tamaños de fuente en el sitio para el rodillo de temas jQuery antes de descargar su tema personalizado. Me olvidé de hacer eso. Lo atribuiré a uno de mis momentos más difíciles.

[editar] esto, obviamente, no era para un botón de la interfaz de usuario, pero el concepto y temas similares se aplican

Fuente

2013-11-07 18:15:49

que estaba teniendo este problema .. mis controles de número eran feos, enorme, y se presentarán en una horizontal en vez de apilados verticalmente ...

que tiene que mirar mi archivo html principal (en realidad un archivo de diseño MVC afeitar) y se dio cuenta que necesitaba para incluir /themes/base/jquery.ui.spinner.css

Ahora mis hilanderas se ven geniales!

Fuente

2014-03-14 16:40:22 bkwdesign

Intenté todas las otras respuestas, pero ninguna parecía funcionar correctamente. Algunos no cambiaron nada y algunos tuvieron efectos secundarios adversos (como escalar todo).

Esto finalmente hizo el truco:

.ui-widget 
 
{ 
 
\t font-size: 75%; 
 
}

Fuente

2015-11-28 20:42:22

elementos de interfaz de usuario jQuery demasiado grande

Respuesta

Cuestiones relacionadas