Misalignment of attribute inspector custom buttons?

[TimDine]

I've got an issue with the placing of a new custom button next to the Delete button on the attribute inspector and could use a hand in figuring out how to have it line up correctly.

I'm using the example at Using the attribute inspector | ArcGIS API for JavaScript to modify the existing Attribute Inspector in the Editor found in the Web Application Template.

My code looks like

var relatedRecordsButton = new Button({ label: "Get Related", "class": "saveButton" },domConstruct.create("div"));

relatedRecordsButton.on("click", getRelated);

domConstruct.place(relatedRecordsButton.domNode,  this.editor.attributeInspector.deleteBtn.domNode, "after");

The result looks like:

With the new custom button overlapping the delete button.  Does anyone have any suggestions to solve this?

[SteveCole · Accepted solution]

In Chrome, I'd open the Developer Tools (F12) and select the button element. Once it's selected, play around with the CSS display property for that element. Maybe something like "display:table-cell" may get it to display inline with the other button.

Once you figure out the "right" CSS display property, be sure to add that CSS property to the button object as you create it in your JS code.

[TimDine]

Got it.  Had to modify the properties of the delete button rather than my button using the method you suggested.  Looks like this now:

Uses:

this.editor.attributeInspector._hideNavButtons = 0;
  
var relatedRecordsButton = new Button({ label: "Get Related", "class": "saveButton" },domConstruct.create("div"));
relatedRecordsButton.on("click", getRelated);
domConstruct.place(relatedRecordsButton.domNode,  this.editor.attributeInspector.deleteBtn.domNode, "after");

var theDeleteBtn = this.editor.attributeInspector.deleteBtn;
domStyle.set(theDeleteBtn.domNode, "float", "none");
domStyle.set(theDeleteBtn.domNode, "width", "auto");
domStyle.set(theDeleteBtn.domNode, "height", "auto");