Tuesday, June 14, 2011

How to fix font and color issues when you put a yii widget inside a jquery widget

If you put a Yii widget inside a jQueryUI widget, then it doesn't look quite right. Here's how to fix it

put this style sheet after you load jQueryUI's style sheet:

<style>
  /*use your site's font and font size*/
  .ui-widget {font-family:inherit; font-size:inherit;}

  /* make form controls inside jqueryui widgets use site font */
  .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family:inherit; }

  /* links go black inside jqueryui. this changes colour of autocomplete however... */
  .ui-widget-content a {color:#06C;}
</style>

Alternatively, you could just edit jQueryUI's style sheet, or roll your own theme.

Also, the blueprint css framework makes jQueryUI's datepicker look wrong. Look for the typography section of screen.css, and comment out this section:

/* thead th      { background: #c3d9ff; } */

No comments:

Post a Comment