Opened 13 years ago

Closed 12 years ago

#1335 closed enhancement (wontfix)

Handling invalid URIs

Reported by: topping@… Owned by: bill
Priority: high Milestone: 0.9
Component: Dijit Version: 0.2
Keywords: widgets cssTemplatePath templates css Cc: ktiedt@…
Blocked By: Blocking:

Description

I'm trying to override the CSS for DatePicker? and having a lot of problems. I'm new to Dojo, so this may be a PBKAC, but TK thought I should file this after some conversation on IRC.

Basically, I have an HTML file with the sample text from the dojo site for DatePicker?:

<html>
    <head>
        <title>Dojo Date Picker Widget Test</title>

        <script type="text/javascript" src="../dojo/dojo.js"></script>
        <script type="text/javascript">
            dojo.require("dojo.widget.DatePicker");
            '''dojo.lang.extend(dojo.widget.html.DatePicker, {templateCssPath: dojo.uri.dojoUri(document.baseURI, "date.css")})'''
        </script>
    </head>
    <body bgcolor="white">
        <div dojoType="DatePicker" widgetId="foo"></div>
    </body>
</html>

This doesn't work.

I also tried this:

<html>
    <head>
        <title>Dojo Date Picker Widget Test</title>

'''        <style type='text/css'>
           @import url(date.css);
        </style>'''

        <script type="text/javascript" src="../dojo/dojo.js"></script>
        <script type="text/javascript">
            dojo.require("dojo.widget.DatePicker");
        </script>
    </head>
    <body bgcolor="white">
        <div dojoType="DatePicker" widgetId="foo"></div>
    </body>
</html>

Still no dice.

TK suggested the following, and the reason to file the ticket:

<html>
    <head>
        <title>Dojo Date Picker Widget Test</title>

        <script type="text/javascript" src="../dojo/dojo.js"></script>
        <script type="text/javascript">
            dojo.require("dojo.widget.DatePicker");
        </script>
    </head>
    <body bgcolor="white">
        <div dojoType="DatePicker" widgetId="foo" '''cssTemplatePath="date.css"'''></div>
    </body>
</html>

Doing this complains about not having a URI in the argument, and I need path relative to the current document. I tried using "{dojo.uri.dojoUri(document.baseURI, 'date.css')}" as the attribute argument, but that didn't get evaluated before being treated literally.

Maybe I am missing big things, I'll watch the discussion here, thanks!

Change History (5)

comment:1 Changed 13 years ago by topping@…

By the way, this is my first time using Trac (used to Jira) and I tried putting formatting in the blocks. Please remove the bold if you are going to cut and paste! :)

comment:2 Changed 13 years ago by ktiedt@…

Cc: ktiedt@… added
Keywords: widgets cssTemplatePath templates css added

Just chiming in since I recommended filing this, would it not make sense for the widget system to check for complete URI's and if NOT complete... dojo.uri.uri them to make them relative to dojo?

It seems like a solution that would solve many many problems with people and overiding CSS...

Maybe I'm looking at too narrow of a problem though?

comment:3 Changed 13 years ago by topping@…

Interestingly, dojo.lang.extend(dojo.widget.html.DatePicker?, {templateCssPath: null}) works when the CSS for the widget is already loaded into the page. So that's a good solution for now, but it seems like having a real URI (as in the first example) ought to work (allowing multiple calendars on the same page to have different CSS).

comment:4 Changed 13 years ago by dylan

Milestone: 0.5

This is an area that is definitely not completely working as expected. Will leave open for now as a reminder to tackle these problems in 0.5.

comment:5 Changed 12 years ago by Adam Peller

Component: WidgetsDijit
Resolution: wontfix
Status: newclosed

In Dijit/0.9 we don't allow for inlining CSS anymore. Instead, you just provide your own CSS separately.

Note: See TracTickets for help on using tickets.