2010-11-04 21 views
6

Estoy usando múltiples temas de ui en una página. Creo un tema personalizado con un alcance css, digamos #scope. Yo uso un campo datepicker en el alcance digamos #scope input#datepicker. el campo datepicker no obtiene los estilos css del tema ui. Supongo que esto se debe a que se creó dinámicamente fuera de #scope, ¿cómo puedo modificar esto y cómo puedo lograr que los estilos se definan en el ámbito?jquery datepicker fuera del alcance de css

Respuesta

4

He resuelto este problema al agregar un envoltorio div en el código.

$(document).ready(function(){ 
    $("#ui-datepicker-div").wrap('<div class="ui-layout-center" />'); 
}); 
+0

Solo para aclarar el "ui-layout-center" es su clase de CSS personalizada, ¿verdad? Personalmente, trato de evitar usar el mismo prefijo ui que se usa en el resto de la interfaz de usuario de jQuery para evitar posibles colisiones de nombres en futuras versiones. –

0

Recuerdo que tuve el mismo problema, compruebe el estilo definido en general como span, puede solaparse con los estilos ui.

2

@bkilinc, estás en lo correcto. El calendario de datepicker se anexa a document.body, fuera de su ámbito personalizado.

http://bugs.jqueryui.com/ticket/4591 http://bugs.jqueryui.com/ticket/4306

En una estructura como la siguiente, el calendario está fuera del ámbito de aplicación del recipiente.

<style type="text/css"> 
    .calendarContainer .ui-datepicker { 
     /* rule intended to affect only .calendarContainer */ 
    } 
</style> 
... 
<body> 
    <div class="calendarContainer"><input name="date"/></div> 
    <div class="ui-datepicker"> (generated calendar)</div> 
</body>