CODEWITHSUNDEEP
cssdojodialog
abraham
abraham

Reputation: 1

Add Content To Dialog Box DOJO

writing an app for opensocial brings up the following problem:

I create a dialog box (css is tundra)

myDialog = new dijit.Dialog({ title: "My Dialog", content: "test content", style: "width: 300px" });

How can I change the properties "overflow" and /or "height" of the

"dijitDialogPaneContent"

contained in myDialog after creating this object?

Thank you Subin

Upvotes: 0

Views: 1177

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44665

There are several approaches you can use, depending on how generic the solution should be.

Apply to all dialogs

If you want to apply the same style to all dialogs, you can "extend" a theme, for example, normally you would use the tundra theme like this:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="location/to/tundra.css" />
    </head>
    <body class="tundra">
        <!-- Your content comes here -->
    </body>
</html>

If you're going to apply it to all dialogs, you could do the following:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="location/to/tundra.css" />
        <link rel="stylesheet" href="custom/style.css" />
    </head>
    <body class="tundra custom">
        <!-- Your content comes here -->
    </body>
</html>

And then write a custom stylesheet like this:

.custom .dijitDialogPaneContent {
    overflow: hidden; /** Custom styles */
}

This will guarantee that it will override the general Tundra style for all dialogs. If you don't use a class like .custom, you cannot override the Tundra stylesheet because .tundra .dijitDialogPaneContent will be more specific (which means it has a higher priority).

Of course, you could write .tundra .dijitDialogPaneContent in your custom stylesheet as well.

Apply to a single dialog through stylesheet

If you want to apply it to a single dialog, then give an ID to the dialog, for example:

myDialog = new dijit.Dialog({
    title: "My Dialog",
    content: "test content",
    style: "width: 300px",
    id: "myDialogId"
});

Then you could write a stylesheet like this:

#myDialogId .dijitDialogPaneContent {
    overflow: hidden; /** Custom styles */
}

Apply to a single dialog (using JavaScript)

Seperate stylesheets may improve readability because you seperate logic from design. If you don't need the seperate stylesheet you could do something like this:

require([ "dojo/query", "dojo/NodeList-dom" ], function(query) {
    // Your code
    query(".dijitDialogPaneContent", myDialog.domNode).style("overflow", "hidden");
});

This will use the domNode property of the dialog to query the content pane and then apply the style.

Apply to multiple dialogs

If you want to apply the same style to multiple dialogs (but not all dialogs), then your best approach would be to create a custom dialog by extending the default dialog. Considering the length of my answer atm I'm not going to explain that into detail, but I recommend reading guides about writing your own widget.

Upvotes: 1

Related Questions