jquery datepicker out of css scope_问答_开发者

开发者 https://www.devze.com 2023-01-23 06:40 出处：网络

I am using multiple ui themes in one page. I create a custom theme w开发者_如何转开发ith a css scope, lets say #scope. I use a datepicker field in the scope lets say #scope input#datepicker. the datep

I am using multiple ui themes in one page. I create a custom theme w开发者_如何转开发ith a css scope, lets say #scope. I use a datepicker field in the scope lets say #scope input#datepicker. the datepicker field does not get css styles from the the ui theme. I guess this is because it is dynamically created outside of #scope, how can I alter this, and how can make it to get styles from scoped.

I solved this problem with adding a wrapper div in code.

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

@bkilinc, you are correct. The datepicker calendar is appended to document.body, outside of your custom scope.

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

In a structure like the following, the calendar is outside of the scope of the container.

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

I remember having the same problem, check the style defined in general such as span, it may overlap with ui styles.