[SOLVED] Correct CSS styles when widget is shown via AJAX

Yii 1.1 General Discussion
1

Hi all,

It’s been perhaps asked a million times already, but I failed to find a solution.

I have a page with a container, and the container is initially empty, but gets populated later via an AJAX request - for example, with a CGridView. The problem is that, since the page is originally empty, no CSS style for the widget is inserted.

When the widget is created later, it misses all the required styles and looks weird.

How can I force the page to include widget’s styles?

2

You should just need to include the relevant style sheet during the initial page load. When the javascript manipulates the data, it will also apply the correct styles based on your included style sheets.

You probably need to find out which style sheet the widget uses and register it when you first load the page.

3

The problem is the CSS link looks like following:

[html]<link rel="stylesheet" type="text/css" href="/assets/990cc480/gridview/styles.css" />[/html]

So it’s cached and using some generated name. I’m looking for a generic solution where I don’t have to hardcode directory name etc.

4

The CSS file will also be located somewhere in the widget directory. You can register it using:

http://www.yiiframework.com/doc/api/1.1/CClientScript#registerCssFile-detail

You won’t need to hard code the asset link, it will be included automatically in the head of your page using a valid URL.

5

The problem has been solved by including the same statement CGridView uses. In the host page I added:




Yii::app()->clientScript->registerCssFile(

  Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets')).'/gridview/styles.css');