I am trying to produce a re-styled dropdown list using the dropDownList (and its active brother) controls. The effect I want to achieve is:
<select name="select2" class="right curBox">
<option value="Eur">EUR</option>
<option value="Usd">USD</option>
</select>
in the css this uses ui.selectmenu to generate a different looking dropdown.
If I add the style to my control :
echo CHtml::dropDownList('srccur',$currency,CHtml::listData(Currency::model()->findAll(),'id','code'),
array(
'class'=>'right curBox',
));
for some reason the style is not applied correctly.
Looking at the html generated by yii:
<a class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown ui-state-active ui-corner-top" id="srccur-button" role="button" href="#" aria-haspopup="true" aria-owns="srccur-menu" style="width: 32px; "><span class="ui-selectmenu-status">GBP</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>
I would expect to see "right curBox" in the a class list - for it to work it looks like:
<a class="ui-selectmenu ui-widget ui-state-default right curBox ui-selectmenu-dropdown ui-state-active ui-corner-top" id="-button" role="button" href="#" aria-haspopup="true" aria-owns="-menu" style="width: 38px; "><span class="ui-selectmenu-status">EUR</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>
Any ideas? Do I need to create some sort of custom control here?
bigbasher:
I am trying to produce a re-styled dropdown list using the dropDownList (and its active brother) controls. The effect I want to achieve is:
<select name="select2" class="right curBox">
<option value="Eur">EUR</option>
<option value="Usd">USD</option>
</select>
in the css this uses ui.selectmenu to generate a different looking dropdown.
If I add the style to my control :
echo CHtml::dropDownList('srccur',$currency,CHtml::listData(Currency::model()->findAll(),'id','code'),
array(
'class'=>'right curBox',
));
for some reason the style is not applied correctly.
Looking at the html generated by yii:
<a class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown ui-state-active ui-corner-top" id="srccur-button" role="button" href="#" aria-haspopup="true" aria-owns="srccur-menu" style="width: 32px; "><span class="ui-selectmenu-status">GBP</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>
I would expect to see "right curBox" in the a class list - for it to work it looks like:
<a class="ui-selectmenu ui-widget ui-state-default right curBox ui-selectmenu-dropdown ui-state-active ui-corner-top" id="-button" role="button" href="#" aria-haspopup="true" aria-owns="-menu" style="width: 38px; "><span class="ui-selectmenu-status">EUR</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>
Any ideas? Do I need to create some sort of custom control here?
The problem is not in the styling of the list box. Somehow it is caused by CSS - I suspect there is a clash between some css that yii provides and the css that this control is using. I can drop in the native html and it appears wrong on this screen. I continue my investigation …
Solved - clash between latest versions of JQuery and the JQueryUI code.