Unwanted scrollbar on Spectrum dialog

[phil-levy]

Is this perhaps a spectrum bug:

The scrollbar seems to appear because of a negative top and bottom margin in the css in .spectrum-Form

synced to jira: https://jira.corp.adobe.com/browse/SDS-7339

[GarthDB]

I'm looking into this.

[lazd]

@phil-levy can you provide the HTML you're using for this? Thanks!

[phil-levy]

It's been a while, but here is what it is:

Add child organization for PhilCorp Inc

Organization

The name of organization can not be empty

Country/Region

CancelSave

[phil-levy]

<div class="spectrum-Dialog react-spectrum-Dialog is-open AddOrEditOrg__dialog" role="dialog" tabindex="1" id="react-spectrum-75" aria-labelledby="react-spectrum-75-heading" aria-describedby="react-spectrum-75-content" aria-modal="true"><div class="spectrum-Dialog-header spectrum-Dialog-header--confirmation"><h2 class="spectrum-Heading spectrum-Heading--subtitle1 spectrum-Dialog-title" id="react-spectrum-75-heading">Add child organization for PhilCorp Inc</h2></div><div class="spectrum-Dialog-content" id="react-spectrum-75-content"><form class="spectrum-Form AddOrEditOrg__dialog__form"><div><div class="AddOrEditOrg__dialog__fieldLabel"><label class="spectrum-FieldLabel" id="react-spectrum-83" for="edit-org-name">Organization</label><input type="text" class="spectrum-Textfield is-invalid AddOrEditOrg__dialog__inputField" data-testid="edit-org-name" id="edit-org-name" aria-describedby="EditOrganizationOrgName_errorMessage_info" aria-labelledby="react-spectrum-83" rows="1" value="" aria-invalid="true"></div><div class="EditCompartment_errorMessage" id="EditOrganizationOrgName_errorMessage_info" role="alert">The name of organization can not be empty</div></div><div class="EditCompartment__margin--top"><div class="AddOrEditOrg__dialog__fieldLabel"><label class="spectrum-FieldLabel" id="edit-org-country" for="react-spectrum-84">Country/Region</label><div class="react-spectrum-Autocomplete spectrum-InputGroup AddOrEditOrg__dialog__inputField" role="combobox" aria-expanded="false" aria-haspopup="listbox"><input type="text" class="spectrum-Textfield spectrum-InputGroup-field" aria-labelledby="edit-org-country" aria-describedby="EditOrganizationCountryCode_errorMessage_info" id="react-spectrum-84" autocomplete="off" aria-autocomplete="list" rows="1" value="United States"><button id="react-spectrum-84-button" type="button" aria-label="Show 228 suggestions" aria-labelledby="react-spectrum-84 react-spectrum-84-button" tabindex="-1" class="spectrum-FieldButton"><svg class="spectrum-UIIcon-ChevronDownMedium spectrum-Icon spectrum-InputGroup-icon" focusable="false" aria-hidden="true" role="img"><path d="M9.99 1.01A1 1 0 0 0 8.283.3L5 3.586 1.717.3A1 1 0 1 0 .3 1.717L4.293 5.7a1 1 0 0 0 1.414 0L9.7 1.717a1 1 0 0 0 .29-.707z" class="spectrum-UIIcon--medium"></path><path d="M11.99 1.51A1 1 0 0 0 10.283.8L6 5.086 1.717.8A1 1 0 1 0 .3 2.217l4.99 4.99a1 1 0 0 0 1.414 0l4.99-4.99a1 1 0 0 0 .296-.707z" class="spectrum-UIIcon--large"></path></svg></button></div></div><div class="EditCompartment_errorMessage" id="EditOrganizationCountryCode_errorMessage_info" role="alert"></div></div></form></div><div class="react-spectrum-Dialog-buttons spectrum-Dialog-footer"><button class="spectrum-Button spectrum-Button--secondary"><span class="spectrum-Button-label">Cancel</span></button><button class="spectrum-Button spectrum-Button--cta is-disabled" disabled=""><span class="spectrum-Button-label">Save</span></button></div></div>

[GarthDB]

Form is using a table layout and negative margins to get rid of some extra spacing on the top and bottom. There are some real problems with layout and negative margins. We should be able to easily move this to a grid layout and remove the negative margins.