Defect/Issue Description:
Column gutter stops working once the form component is a child of another component. Especially, column gutter for column set within a column.
Environment:
- API Version: v2
- Release: Chicago
- Release version: Chicago 14.4.7
- Platform: Salesforce
Brief Summary of the Defect/Issue:
Column gutter stops working once the form component is a child of another component. Especially, column gutter for column set within a column.
Action Performed:
Create a form component, add few columns, specify a column gutter. Finally, place the form component inside another component.
Expected Result:
There should be spacing between columns of a form depending on the specified spacing (e.g. 40px).
Actual Result:
The column gutter spacing is ignored.
Additional Resources:
<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<models>
<model id="UIModel1" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only">
<fields>
<field id="NewField1" displaytype="TEXT" length="255"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<skuid__deck columnGutter=".75em" rowGutter=".75em" model="UIModel1" showSaveCancel="false" verticalAlign="top" minWidth="350px" uniqueid="sk-23_2-34400">
<components>
<skuid__form showErrorsInline="true" model="UIModel1" uniqueid="sk-23zl-20939" mode="edit">
<columns>
<column>
<sections>
<section title="New Section" showHeading="false">
<fields>
<columns columnGutter="150px">
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields>
<skuid__field id="NewField1" uniqueId="sk-23zl-20940"/>
</fields>
</section>
</sections>
</column>
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields>
<skuid__field id="NewField1" uniqueId="sk-23zl-20941"/>
</fields>
</section>
</sections>
</column>
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields>
<skuid__field id="NewField1" uniqueId="sk-23zl-20942"/>
</fields>
</section>
</sections>
</column>
</columns>
</fields>
</section>
</sections>
</column>
</columns>
</skuid__form>
</components>
<filtering enableSearch="false"/>
<sorting enable="false"/>
</skuid__deck>
<skuid__accordion uniqueid="sk-23zi-20011">
<sections>
<section title="Column set within Column Set">
<components>
<skuid__form showErrorsInline="true" model="UIModel1" uniqueid="sk-23zK-9732" mode="edit">
<columns>
<column>
<sections>
<section title="New Section" showHeading="false">
<fields>
<columns columnGutter="233px">
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields>
<skuid__field id="NewField1" uniqueId="sk-23zV-16323"/>
</fields>
</section>
</sections>
</column>
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields>
<skuid__field id="NewField1" uniqueId="sk-23zW-16894"/>
</fields>
</section>
</sections>
</column>
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields>
<skuid__field id="NewField1" uniqueId="sk-23zX-17464"/>
</fields>
</section>
</sections>
</column>
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields>
<skuid__field id="NewField1" uniqueId="sk-23zw-27031"/>
</fields>
</section>
</sections>
</column>
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields>
<skuid__field id="NewField1" uniqueId="sk-23zx-27691"/>
</fields>
</section>
</sections>
</column>
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields/>
</section>
</sections>
</column>
<column behavior="flex" ratio="1" width="200px" verticalAlign="top" minWidth="100px">
<sections>
<section title="New Section" showHeading="false">
<fields/>
</section>
</sections>
</column>
</columns>
</fields>
</section>
</sections>
</column>
</columns>
</skuid__form>
</components>
</section>
</sections>
</skuid__accordion>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
<background/>
</skuid__page>
