Question: How can I move the padding around a dojox chart? Here is an example:

```
   var chart1 = new dojox.charting.Chart2D("simplechart", {fill:"#FFC0C0"});
   chart1.addPlot("default", {type:"Columns"});
   chart1.addAxis("y", {type:"Invisible", includeZero:true, vertical: true});
   chart1.addSeries("Series 1", [ 4,9,16,25,36,49,64,81,100 ]);
   chart1.render();

```

Here is the plot generated.

<http://www.flickr.com/photos/8110919@N02/5634624479/>

Is there a way to remove the pink area around the chart?

Thanks.

Answer: 
I find is not a dupe. On the opposite I find it good so +1 from me.

The jqGrid use internally the method `viewModal` (`$.jgrid.viewModal`) which shows the most dialogs. The method has `toTop` parameter, but and [delGridRow](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#delgridrow) and [editGridRow](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow) dosn't use it and it will be set to `toTop:true`. So the Add, Edit and Delete dialogs will be displayed always to the top of the grid which can be inside of inviable area.

To fix the problem you can define the [afterShowForm](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#events2) event handle which change the dialog position. For example

```
$("#list").jqGrid('navGrid','#pager', {}, {}, {},
                  {
                      afterShowForm: function($form) {
                          var dialog = $form.closest('div.ui-jqdialog'),
                              selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
                              selRowCoordinates = $('#'+selRowId).offset();
                          dialog.offset(selRowCoordinates);
                      }
                  });

```

In the example the dialog will be placed over the selected row. The code can be improved for the case when the selected row in the last row and the bottom part of the dialog is outside of the window. Nevertheless the above implementation seems me better as the default one because the user see the dialog exactly over the row which he want to delete and he can move the dialog so that it will be full visible.

You can test the suggested movement of the Delete dialog on [the live demo](http://www.ok-soft-gmbh.com/jqGrid/ChangeDelDialogPosition.htm).
Found something better [here](http://www.queness.com/code-snippet/6853/center-an-element-on-the-screen-using-jquery) !

add this in your javascript library :

```
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

```

Now you just need to add this in the afterShowForm property :

```
afterShowForm: function(form) {
    form.closest('div.ui-jqdialog').center();
}

```

form.closest('div.ui-jqdialog') => allow you to get the modal popup window, no need to precise if it's an editForm or a deleteForm.

This code place the popup in the center of your screen, so you don't have to scroll if your have a really big grid.