Can we modify the attribute inspector?

[LizDaRos]

I'd like to change the setup of how the attribute inspector displays, such as position the delete button on the top of the page, not at the bottom under attachments.
I'm using the mobile attribute editing sample from ESRI.
Any help would greatly be appreciated. Thanks.

[derekswingley1]

You might be able to do what you want with CSS. Check out the attribute inspector's CSS classes.

[LizDaRos]

Thanks for getting back to me.

I added-
      .esriAttributeInspector .atiDeleteButton {
        color:Red;
       }
to the style section of my code which makes the delete button text color red. I've tried a bunch of other settings for this like margin-left and etc. but haven't had much success in moving the button. Is there something else I should try?

[JohnGrayson]

I'm not sure if this will help, but depending on how a particular style attribute is set in the original widget definition you might have to use !important.  Try this:

.esriAttributeInspector .atiDeleteButton {
  color:red !important;
}

[LizDaRos]

Thanks for the tip; !important helped but these CSS settings seem to only allow it to move around in just the area at the bottom with the finish button. I used:
margin-top:2% !important;
and
top:5% !important;
but neither moved it to the top of the entire page.

I saw a sample that inserts a save button-
dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");
Is there something I could do like this to the delete button?

[LizDaRos]

I was able to move the delete button to the top of the page using

position:absolute !important;top:20% !important;margin-left:30% !important;

I would now like to modify the delete icon since it has a strange bubble underneath it. I've been trying to use the atiDeleteIcon but not having much success. I've tried it a few different ways such as

.esriAttributeInspector .atiDeleteIcon{

but nothing seems to change. Has anyone else changed an icon yet of either the previous, next, or last icon?

Also has anyone been able to change the screen that shows up after you click the delete button? I'd like to add some information on that page but all it displays is the geocoded address and "No Features Selected".

[KellyHutchins]

It sounds like the page with the geocoded address is specific to your application. Can you post a link to your app?

I was able to move the delete button to the top of the page using

position:absolute !important;top:20% !important;margin-left:30% !important;

I would now like to modify the delete icon since it has a strange bubble underneath it. I've been trying to use the atiDeleteIcon but not having much success. I've tried it a few different ways such as

.esriAttributeInspector .atiDeleteIcon{

but nothing seems to change. Has anyone else changed an icon yet of either the previous, next, or last icon?

Also has anyone been able to change the screen that shows up after you click the delete button? I'd like to add some information on that page but all it displays is the geocoded address and "No Features Selected".

[HemingZhu]

I was able to move the delete button to the top of the page using

position:absolute !important;top:20% !important;margin-left:30% !important;

I would now like to modify the delete icon since it has a strange bubble underneath it. I've been trying to use the atiDeleteIcon but not having much success. I've tried it a few different ways such as

.esriAttributeInspector .atiDeleteIcon{

but nothing seems to change. Has anyone else changed an icon yet of either the previous, next, or last icon?

Also has anyone been able to change the screen that shows up after you click the delete button? I'd like to add some information on that page but all it displays is the geocoded address and "No Features Selected".

I have set up icon for the save button like the following:

.esriAttributeInspector .atiLayerName {display:none;} 
      .saveButton { 
        margin:0px;
        width:16px; 
        height:16px;
        background-image:url('save.png')!important;
        background-repeat:no-repeat; 
       } 
....
var saveButton = new dijit.form.Button({"iconClass":"saveButton"}); 

[LizDaRos]

Kelly I was able to change the page that appears after selecting the delete button. I guess I didn't think it would be as simple as adding a line like

$.mobile.changePage("#deleteDialog",null,true,true)

Thanks though.
I am still having an issue trying to change my delete button icon. I am attaching a picture of the button and you can see there is something underneath it that I can't get ride of. Any ideas?

[KellyHutchins]

The easiest way to find out what that bubble is so you can remove it is to use Firebug or Chrome Developer tools to inspect it. Both Chrome Dev Tools and Firebug have a tool that allows you to inspect elements on the page. Click the tool then click the 'bubble' and you can find out information about the HTML and CSS classes associated with the element.