nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Find more posts tagged with

Accepted answers

TracySchloss

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;

}

All comments

khutchins

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.

report_graffiti.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.

khutchins

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.

AntGiles

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

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;

}

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.