[FIXED] Dropdown styling in yii

Issue

I am trying to theme my application. For the active drop down list, from my CSS, the following style is called,

.inputs {
  width: 635px;
  float: left;
}

.inputs select[id="Model_attribute"]{
  float: left;
  padding: 9px 9px 9px;
  width: 278px;
  margin-left: 20px;
  margin-top: 23px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  border:none;
}

The following is the generated html

<div class="inputs">
<select name="Model[attribute]" id="Model_attribute">
<option value="">Select an option</option>
<option value="26">Option 1</option>
<option value="28">Option 2/option>
</select>   
</div>

Following is the view file

    <?php echo CHtml::activeDropDownList($model,'attribute', $model->getOptions(),array(
                 'prompt'=>$hname,
                'ajax' => array(
                'type'=>'POST',
                'id'=>'id',
                'url'=>MyController::createUrl('loadOptions'),
                'update'=>'#'.CHtml::activeId($model,'attribute2'),
 
              'data'=>array('attribute'=>'js:this.value'),
   )
        )); ?>

When I tested it as an html file, the style got applied, but when I call it in my original form, the style is not coming. I inspected it with firebug ,but no style is showing. Kindly help. Thanks in advance!

Solution

In yii, you can specify something like the following inside your activeDropDownList

array('class'=>'yourCssClass')

then in your stylesheet :

.yourCssClass{
   //any styles
}

This should do it for you.

Note : Make sure you are including the proper stylesheet. Try clearing browser cache/history also.

Edit :

Your completed drop down widget will look like :

<?php echo CHtml::activeDropDownList($model,'attribute', $model->getOptions(),array(
      'prompt'=>$hname,
      'class'=>'yourCssClass',
      'ajax' => array(
      'type'=>'POST',
      'id'=>'id',
      'url'=>MyController::createUrl('loadOptions'),
      'update'=>'#'.CHtml::activeId($model,'attribute2'),
      'data'=>array('attribute'=>'js:this.value'),
   )
)); ?>

and repeat the same for all drop down lists. If the styling is same, just use the same class and if styles are different , then use a different class accordingly.

Hope this makes sense.

Answered By - Roy M J