The same padding (size of space) between Addon.Start and Addon.Body text

[sturlath]

Hi

I´m trying to to add some padding between Start and Body of an Addon so that its the same length. Just so that two AddonType.Body's will line up.

Here are two approaches that I have been trying out, unsuccessfully.

1.

<Card>
    <CardTitle Size="5" Margin="Margin.Is3">Title</CardTitle>
    <CardBody>
        <Field JustifyContent="JustifyContent.Center">
            <Addons>
                <Addon AddonType="AddonType.Start" Padding="Padding.Is5.FromRight">
                    Nr. 1
                </Addon>
                <Addon AddonType="AddonType.Body">
                    <TextEdit Padding="Padding.Is2.FromRight">
                        <Feedback>
                            <ValidationError />
                        </Feedback>
                    </TextEdit>
                </Addon>
                <Addon AddonType="AddonType.End">
                    <Tooltip Text="@L["Copy"]">
                        <Button Color="Color.Primary">
                            <Icon Name="@("fa-copy")" Style="font-size:large" />
                        </Button>
                    </Tooltip>
                </Addon>
            </Addons>
        </Field>
        <Field JustifyContent="JustifyContent.Center">
            <Addons>
                <Addon AddonType="AddonType.Start" Padding="Padding.Is5.FromRight">
                    Nr. 2 longer
                </Addon>
                <Addon AddonType="AddonType.Body">
                    <TextEdit Padding="Padding.Is2.FromRight">
                        <Feedback>
                            <ValidationError />
                        </Feedback>
                    </TextEdit>
                </Addon>
                <Addon AddonType="AddonType.End">
                    <Tooltip Text="@L["Copy"]">
                        <Button Color="Color.Primary">
                            <Icon Name="@("fa-copy")" Style="font-size:large" />
                        </Button>
                    </Tooltip>
                </Addon>
            </Addons>
        </Field>
        <Field JustifyContent="JustifyContent.Center">
            <Addons>
                <Addon AddonType="AddonType.Start">
                    Nr. 3
                </Addon>
                // here I was just seeing if adding padding to the right/left would do anything.. it doesn´t...
                <Addon AddonType="AddonType.Body" Padding="Padding.Is2.FromRight">
                    <TextEdit Padding="Padding.Is2.FromRight">
                        <Feedback>
                            <ValidationError />
                        </Feedback>
                    </TextEdit>
                </Addon>
                <Addon AddonType="AddonType.End">
                    <Tooltip Text="@L["Copy"]">
                        <Button Color="Color.Primary">
                            <Icon Name="@("fa-copy")" Style="font-size:large" />
                        </Button>
                    </Tooltip>
                </Addon>
            </Addons>
        </Field>
        <Field JustifyContent="JustifyContent.Center">
            <Addons>
                <Addon AddonType="AddonType.Start">
                    Nr. 4
                </Addon>
                <Addon AddonType="AddonType.Body" Padding="Padding.Is2.FromLeft">
                    <TextEdit Padding="Padding.Is2.FromLeft">
                        <Feedback>
                            <ValidationError />
                        </Feedback>
                    </TextEdit>
                </Addon>
                <Addon AddonType="AddonType.End">
                    <Tooltip Text="@L["Copy"]">
                        <Button Color="Color.Primary">
                            <Icon Name="@("fa-copy")" Style="font-size:large" />
                        </Button>
                    </Tooltip>
                </Addon>
            </Addons>
        </Field>
    </CardBody>
</Card>                  

2.
So I move to this here below and it looks promising but I just can´t get the End one stop from braking to a new line...
Not sure if this is a bug or just something I´m missing in the code...?

<Field ColumnSize="ColumnSize.Is12.OnDesktop">
  <Card>
      <CardTitle Size="5" Margin="Margin.Is3">Title</CardTitle>
      <CardBody>
          <Field Horizontal="true">
              <FieldLabel ColumnSize="ColumnSize.Is1">Test</FieldLabel>
              <FieldBody ColumnSize="ColumnSize.Is11">
                  <Addon AddonType="AddonType.Body">
                      <TextEdit>
                          <Feedback>
                              <ValidationError />
                          </Feedback>
                      </TextEdit>
                  </Addon>
                  <Addon AddonType="AddonType.End">
                      <Tooltip Text="@L["Copy"]">
                          <Button Color="Color.Primary">
                              <Icon Name="@("fa-copy")" Style="font-size:large" />
                          </Button>
                      </Tooltip>
                  </Addon>
              </FieldBody>
          </Field>
      </CardBody>
  </Card>
</Field>

[stsrki]

You missed the Addons wrapper

<Field ColumnSize="ColumnSize.Is12.OnDesktop">
    <Card>
        <CardTitle Size="5" Margin="Margin.Is3">Title</CardTitle>
        <CardBody>
            <Field Horizontal="true">
                <FieldLabel ColumnSize="ColumnSize.Is1">Test</FieldLabel>
                <FieldBody ColumnSize="ColumnSize.Is11">
+                    <Addons>
                        <Addon AddonType="AddonType.Body">
                            <TextEdit>
                                <Feedback>
                                    <ValidationError />
                                </Feedback>
                            </TextEdit>
                        </Addon>
                        <Addon AddonType="AddonType.End">
                            <Tooltip Text="@L["Copy"]">
                                <Button Color="Color.Primary">
                                    <Icon Name="@("fa-copy")" Style="font-size:large" />
                                </Button>
                            </Tooltip>
                        </Addon>
                    </Addons>
                </FieldBody>
            </Field>
        </CardBody>
    </Card>
</Field>

[sturlath]

Thank you! So sorry for wasting your time with this! I just didn´t see it! Man... time for a weekend rest? heheh

[stsrki]

No worries. It happens to all of us :)