posted by jwerner on Thursday, September 22, 2011 4:13 PM

Perhaps you have a Yii CGridView with lots of columns. If you use dropdown select lists as filters on some columns, these select lists get rather narrow.

You can add a jQuery live handler to the select lists focus event which changes the CSS width.

After your grid view code, add this:

<?php
$js = <<< EOL
jQuery('table.items tr.filters select')
    .on('focus',function(event){
        jQuery(this).css('width','200px');return false;
    });
jQuery('table.items tr.filters select')
    .live('blur',function(event) {
        jQuery(this).css('width','100%');
    });
EOL;
Yii::app()->clientScript->registerScript(
    'enlargeDropdowns',
    $js
);
?>

This triggers a small piece of jQuery code to set the width of the select lists within the table filters row to 200px.

When the list loses focus (event: blur), the width is reset to the original 100%.

Comments

No comments


Please enter the letters as they are shown in the image above.
Letters are not case-sensitive.

Add comment

Change Log

Created OnSep 22, 2011 4:13:41 PM CEST
Created ByJoachim Werner
Updated OnSep 20, 2012 1:48:50 PM CEST
Updated ByJoachim Werner