WhDatePicker style is not working if we have cjuidautocomplete on same form

Question

I am having a style issue with WhDatePicker.When we use Cjuiautocomplete on the same form with WhDatePicker then the Style of datepicker is not loaded properly. I tried to remove the Jquery-Ui.css but then Autocomplete style is not working. How can we resolve this issue.

Answer 1

There is no fix to this right now except manually overwriting the CJui CSS files after putting them in a name scope as pointed out by Mihai P.

Or you can do this, the CSS files which loads in the end wins the class precedence. So you can write your code something like :-

$this->widget('zii.widgets.jui.CJuiAutoComplete',array(
    'name'=>'city',
    'source'=>array('ac1','ac2','ac3'),
    'options'=>array(
        'minLength'=>'2',
    ),
    'htmlOptions'=>array(
        'style'=>'height:20px;',
    ),
));

$this->widget('yiiwheels.widgets.datepicker.WhDatePicker', array(
    'name' => 'datepickertest',
    'pluginOptions' => array(
        'format' => 'mm/dd/yyyy'
    )
));

Call the autocomplete first so that the CSS files from YiiWheel's Datepicker are loaded in the last.

Answer 2

Probably the styles in jquery ui overwrite the styles in your page, resulting in the cjui not showing using the correct styles. Use a scope for jquery ui to make only a specific part of the page show using those styles.
http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/
http://devcoma.blogspot.com.au/2010/09/how-to-use-jquery-ui-theme-with-other.html