Are there styles available to make AttributeInspector look more like a form?

[TracySchloss]

I would like to change the style of the attribute inspector to look more like a typical HTML form.  I see there are classes for atiLayerName, atiField and atiLabel.  I've tried adjusting the margins and padding on these, but I can't get the look I want.  I'd rather have the label above the input box and have that box underneath it.  I want the box positioned so that it's justified to the left, lining up with the label. 

Has anyone accomplished this to their satisfaction that can share their style settings?

[KellyHutchins]

Tracy Schloss​ it might be tricky to get the attribute inspector to display as you want. If you are only provide a few input fields and don't need to  handle domains then it might just be easier for you to build a form yourself and then when users submit the form you can call applyEdits on the feature layer to add the feature. Here's a link to a sample that does this:

Report Graffiti

I've also attached the code as a zip.

[TracySchloss]

I appreciate when you include attachments.  I can get to jsBin and jsFiddle, but dropbox and Google docs are both blocked.    You never know what turns out to defined as a security risk. 

This will go with the popupTemplate you just helped me with.  I'm sure to have more postings as I deal with trying to make this all into a seamless workflow to the user.  I haven't used Edit much yet. 

[KellyHutchins]

I recently received an email from another geonet user letting me know that dropbox and jsbin are often blocked so I try to remember to include attachments now. If I forget feel free to remind me.

[AnthonyGiles]

Tracy,

Have you looked at the geoform template:

https://www.arcgis.com/home/item.html?id=931653256fd24301a84fc77955914a82

Regards

Anthony

[TracySchloss]

Thanks, but I'm not looking for a Web Map solution.   I need more control over the interface than I can get from those templates.

[TracySchloss · Accepted solution]

This is working pretty well for me.  It moves the field names over the input and expands the input so that it lines up below it.

.esriAttributeInspector .atiLayerName {

  margin: 15px;

  font-size: 1em;

}

.esriAttributeInspector .atiField {

margin-top:5px;

margin-left: -75px;

width: 325px;

padding: 3px;

}

.esriAttributeInspector .atiLabel {

    margin: 1px;

    padding-left: 3px;

    padding-bottom: 40px;

    font-weight:bolder;

    margin-bottom: 3px;

}