« mobile cctv
Example usage of Zend Form Element as a Controller Action Variable »

why is dijit date picker background bg color transparent?

I had just set up my first dijit form element, a date picker, using Zend Form. loosely Based on this tutorial: http://lampcomputing.com/add-cool-zend-dojo-date-picker-form-element-without-writing-single-line-javascript

Trouble was - my picker was rendering out with a transparent background.

i thought that’s fair enough - us developers have probably been left to set the color of the background - we gotta do some design work after all -eh?

I hacked away at trying to change it using css:

#widget_datepicker {
	background-color: #DDE8DD;
}

but that did not work

i did these google searches in order:

  • “ContentPane decorator” - which was cos i was on wild goose chase due to seeing the ContentPane in my html output. The ContentPane pane had nothing to do with my issue really.
  • “setting the background color of dojo datepicker zend”
  • “setting the bg color of dijit date picker bgcolor”
  • “contentpane dojo bg color”
  • “what does the ContentPane decorator do?”
  • “why is dijit date picker transparent?”

got to the dojo site and searched for:

  • controlling color of dijits using css

which lead me to this page: http://dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo/example-1-why-doesnt-anyone-fill-out-their-tax-forms/adding-some

Where i found the answer:

Quote:

Preliminaries for Dijit

You must add two snippets of code for every page using dijits:

    * A HEAD snippet which loads the style sheet and Dojo libraries, then calls functions to load individual dijit types.
    * A class to the BODY tag specifying the name of your theme. In our examples, we'll use the "Tundra" theme.

Although i had set up the head code using the Zend Dojo View helper

if ($Z_view_obj->dojo()->isEnabled()){....

I had not added a class to the body tag to specify the theme.

<body class="tundra">

Once i did this it worked like a dream.

This entry was posted on Monday, December 22nd, 2008 at 8:29 am and is filed under Zend Framework, dojo. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “why is dijit date picker background bg color transparent?”

  1. Krish Says:
    April 7th, 2009 at 11:43 am

    Hey Johnnie,

    Thanks for this tip……it helped me a lot….

    i’m new to zend framework

  2. Gaston Says:
    January 26th, 2010 at 11:46 pm

    Hi I am having trouble undertanding some of this post, I dont know if you can help me? on this part, how are you doing this?

    if ($Z_view_obj->dojo()->isEnabled()){….

    thank you

  3. Gaston Says:
    January 27th, 2010 at 12:15 am

    Ok I think I need to be more clear on my questions, I want to change the background color of the datepicker because the numbers are white like the background, this is what i have on my coding.

    1.- On my layout:

    dojo(); ?>

    2. On my view:
    dojo()->addStylesheetModule(’dijit.themes.tundra’);?>

    3. On my Form:
    $toDate = new Zend_Dojo_Form_Element_DateTextBox(’ToDate’);
    $toDate->setRequired(true);
    $toDate->setLabel(’To: ‘);

    4. Bootstrap:
    // Set the Dojo Helper
    $view = Zend_Layout::getMvcInstance()->getView();
    Zend_Dojo::enableView($view);

    and thats it, I am new at dojo and zend in general.

    thanks in advance

  4. John Says:
    January 28th, 2010 at 2:26 pm

    @ Gaston
    This blog post was written a while a go. So i do not know if things have changed.

    To answer your question about the “isEnabled()” bit…. look at the Zend docs example of calling the “isEnabled()” method on the Dojo view helper. I was using Zend View outside of the MVC framework, which might explian my weird Zend View object variable name ($Z_view_obj):

    http://framework.zend.com/manual/en/zend.dojo.view.html
    (To jump to it on the page tell your broswer to search (i.e CTRL+F) for the string: “$this->dojo()->isEnabled” )

    But, for me, the key to my solution was something in the HTML body. I.e In your layouts/layout.phtml (or whatever script outputs the html body tag ) you need to remember to add the ‘dojo theme’ to the ‘class’ attribute of the ‘body’ tag in your html. Its a css thang.

    For example, if you want to use the ‘tundra’ theme, add the class attribute like this:

    <head>
    …where you add dojo scripts/css
    </head>
    …..
    <html>
    <body class="tundra">
    ….
    <h1>My Nice page</h1>
    …
    rest of html content
    …

    ————

    Its happens cos
    * your head is concentrating on learning Zend Form - which is a feat in itself
    * plus you are getting your head around Zend MVC - which is a feat in itself
    * plus you are getting your head around Dojo - which is a feat in itself
    * plus your mind is thinking ‘backend’ of server
    * then you head for the CSS scripts and hack away
    * then you come here ;o)

    BUT - After all that - the solution is a common-or-garden body tag that disrupts the whole thing. I love it.

    http://www.urbandictionary.com/define.php?term=forgot%20to%20hook%20up%20the%20doll

Leave a Reply