Issues with Dropdowns

I have a few dropdowns in my interface, however when selecting the dropdown, choices are being constrained by the UI component they are housed in. This is leading to dropdown options being unable to be selected. How can I have the dropdown choices overflow the UI elements?

 (dev)  (Prod)

The strangest thing about this issue is that the dropdowns overflow as expected in my prod org, but doesn't work in either my Dev or QA org. My Prod org is 23.4 vs my Dev and QA orgs being 24.1.

Any help would be greatly appreciated! 

  Discussion posts and replies are publicly visible

Parents Reply Children
  • The first screenshot is in our dev org (Appian version 24.1)

    The second screenshot is in our prod org (Appian version 23.4)

    The issues are happening both live, and in the interface designer. What's strange is our QA environment also has the issue with the dropdown (version 23.4). Our QA environment and Prod environment code bases are identical as we haven't updated our QA environment since our last Prod release. 

    I haven't been able to find anywhere to denote the Z axis of interface components. Maybe I'm missing something here?

    Also, I have opened a case with Appian support - thank you for that suggestion!

  • 0
    Certified Lead Developer
    in reply to bpurcell

    I would really be interested in the code of that interface. The only way I know of to create something like this, is by using a card layout with a fixed height, and then place components inside. I tried this with a drop down which works as expected in Firefox and Chrome.

    {
      a!cardLayout(
        contents: {
          a!dropdownField(
            choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4",
                            "Option 5", "Option 6", "Option 7", "Option 8",
                            "Option 9", "Option 10", "Option 11", "Option 12"},
            choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},
            label: "Dropdown",
            labelPosition: "ABOVE",
            placeholder: "--- Select a Value ---",
            saveInto: {},
            searchDisplay: "AUTO",
            validations: {}
          )
        },
        height: "EXTRA_SHORT",
        style: "TRANSPARENT",
        marginBelow: "STANDARD"
      )
    }

  • Below is the code for the a!cardLayout. It is close to 400 lines, so apologies for the length.

    a!cardLayout(
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!horizontalLine(),
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: { a!richTextItem(text: { "    " }) }
                      ),
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem(
                      item: a!dropdownField(
                        choiceLabels: {
                          "All",
                          "7 Days",
                          "30 Days",
                          "90 Days",
                          "Custom"
                        },
                        choiceValues: {
                          "All",
                          "7 Days",
                          "30 Days",
                          "90 Days",
                          "Custom"
                        },
                        label: "Time Period",
                        labelPosition: "ABOVE",
                        value: if(
                          a!isNullOrEmpty(local!defaulttimeperiod),
                          local!timeperiod,
                          local!defaulttimeperiod
                        ),
                        saveInto: {
                          local!defaulttimeperiod,
                          a!save(
                            if(
                              a!isNullOrEmpty(local!defaulttimeperiod),
                              local!timeperiod,
                              local!defaulttimeperiod
                            ),
                            local!defaulttimeperiod
                          ),
                          a!save(local!Assignedto, null),
                          a!save(local!casesubtype, null),
                          a!save(local!priority, null),
                          a!save(local!search, null),
                          a!save(local!Caseintitated, null),
                          a!save(local!topAllCases, null),
                          /*a!save(local!CreatedBy, null),*/
                          a!save(local!fromdate, null),
                          a!save(local!todate, null)
                        },
                        searchDisplay: "AUTO",
                        validations: {}
                      ),
                      width: "AUTO"
                    )
                  }
                ),
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: { a!richTextItem(text: { "       " }) }
                      ),
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem(
                      item: a!dateField(
                        label: "From",
                        labelPosition: "ABOVE",
                        value: local!fromdate,
                        saveInto: local!fromdate,
                        showWhen: if(
                          local!defaulttimeperiod = "Custom",
                          true,
                          false
                        ),
                        required: if(
                          local!defaulttimeperiod = "Custom",
                          true,
                          false
                        ),
                        validations: {
                          if(
                            todate(local!fromdate) > today(),
                            "From Date must not be greater than today",
                            if(
                              and(
                                local!defaulttimeperiod = "Custom",
                                a!isNullOrEmpty(todate(local!todate)),
                                (todate(local!fromdate))
                              ),
                              " To Date is Required",
                              if(
                                and(
                                  todate(local!fromdate) > todate(local!todate),
                                  a!isNotNullOrEmpty(todate(local!todate))
                                ),
                                "From Date must not be greater than ToDate",
                                null
                              )
                            )
                          )
                        }
                      )
                    ),
                    a!sideBySideItem(
                      item: a!dateField(
                        label: "To",
                        labelPosition: "ABOVE",
                        value: local!todate,
                        saveInto: local!todate,
                        showWhen: if(
                          local!defaulttimeperiod = "Custom",
                          true,
                          false
                        ),
                        required: if(
                          local!defaulttimeperiod = "Custom",
                          true,
                          false
                        ),
                        validations: {
                          if(
                            todate(local!todate) > today(),
                            "To Date must not be greater than today",
                            if(
                              and(
                                local!defaulttimeperiod = "Custom",
                                a!isNullOrEmpty(todate(local!fromdate)),
                                a!isNotNullOrEmpty(todate(local!todate))
                              ),
                              " From Date is Required",
                              ""
                            )
                          )
                        }
                      )
                    )
                  },
                  spacing: "NONE"
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!horizontalLine(),
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: { a!richTextItem(text: { "" }) }
                      ),
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem(
                      item: a!dropdownField(
                        choiceLabels: {
                          "All",
                          "Billing",
                          "Client Service",
                          "Recon",
                          "Compliance"
                        },
                        choiceValues: {
                          0,
                          1,
                          2, 
                          5,
                          6
                        },
                        label: "Case Type",
                        labelPosition: "ABOVE",
                        value: if(
                          a!isNullOrEmpty(local!defaultCaseType),
                          local!caseType,
                          local!defaultCaseType
                        ),
                        saveInto: {
                          local!defaultCaseType,
                          a!save(
                            if(
                              a!isNullOrEmpty(local!defaultCaseType),
                              local!caseType,
                              local!defaultCaseType
                            ),
                            local!defaultCaseType
                          ),
                          a!save(local!Assignedto, null),
                          a!save(local!casesubtype, null),
                          a!save(local!priority, null),
                          a!save(local!search, null),
                          a!save(local!Caseintitated, null),
                          a!save(local!topAllCases, null),
                          /*a!save(local!CreatedBy, null),*/
                          a!save(local!fromdate, null),
                          a!save(local!todate, null)
                        },
                        searchDisplay: "AUTO",
                        validations: {}
                      ),
                      width: "AUTO"
                    )
                  }
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!dateField(
                  label: "Date",
                  labelPosition: "ABOVE",
                  saveInto: {},
                  /*showWhen:local!defaulttimeperiod="Year to date",*/
                  validations: {}
                )
              },
              showWhen: local!defaulttimeperiod = "Year to date"
            ),
            a!columnLayout(
              contents: {
                a!horizontalLine(),
                a!dropdownField(
                  choiceLabels: {
                    a!forEach(
                      items: fn!reject(
                        fn!isnull,
                        {
                          union(
                            local!CreatedByCases,
                            append(local!CreatedByCases,local!CreatedBy)
                          )
                        }
                      ),
                      expression: a!match(
                                    value: fv!item,
                                    equals: "All",
                                    then: "All",
                                    default: concat(
                                      user(username: fv!item, property: "firstName"),
                                      " ",
                                      user(username: fv!item, property: "lastName")
                                    )
                                  )
                    )
                  },
                  choiceValues: {
                    fn!reject(
                      fn!isnull,
                      {
                        union(
                          local!CreatedByCases,
                          append(local!CreatedByCases,local!CreatedBy)
                        )
                      }
                    )
                  },
                  label: "Created By",
                  labelPosition: "ABOVE",
                  value: if(
                    a!isNullOrEmpty(local!CreatedBy),
                    fn!reject(
                      fn!isnull,
                      {
                        union(
                          local!CreatedByCases,
                          local!CreatedByCases
                        )
                      }
                    ),
                    local!CreatedBy
                  ),
                  saveInto: {
                    local!CreatedBy,
                    a!save(
                      if(
                        a!isNullOrEmpty(local!CreatedBy),
                        fn!reject(
                          fn!isnull,
                          {
                            union(
                              local!CreatedByCases,
                              local!CreatedByCases
                            )
                          }
                        ),
                        local!CreatedBy
                      ),
                      local!CreatedBy
                    ),
                    a!save(local!Assignedto, null),
                    a!save(local!casesubtype, null),
                    a!save(local!priority, null),
                    a!save(local!search, null),
                    a!save(local!Caseintitated, null),
                    a!save(local!topAllCases, null)
                  },
                  searchDisplay: "AUTO",
                  validations: {}
                )
              }
            ),
            a!columnLayout(contents: {}, width: "1X"),
            a!columnLayout(
              contents: {
                a!columnsLayout(
                  columns: {
                    a!columnLayout(contents: {}, width: "1X"),
                    a!columnLayout(
                      contents: {
                        a!horizontalLine(weight: "THIN", color: "#E5EDFF"),
                        a!horizontalLine(weight: "THIN", color: "#E5EDFF"),
                        a!sideBySideLayout(
                          items: {
                            a!sideBySideItem(
                              item: a!recordActionField_23r3(
                                actions: {
                                  a!recordActionItem(
                                    action: 'recordType!{b58350e3-af30-4f26-b350-464f7238c988}BOP_IntakeForm.actions.{0d7166b5-e7bf-4154-9ed9-b2d28519127c}OpenCase'
                                  )
                                },
                                style: "TOOLBAR",
                                display: "LABEL_AND_ICON",
                                align: "END"
                              ),
                              width: "AUTO"
                            )
                          }
                        )
                      },
                      width: "6X"
                    ),
                    a!columnLayout(
                      contents: {
                        a!horizontalLine(weight: "THIN", color: "#E5EDFF"),
                        a!horizontalLine(weight: "THIN", color: "#E5EDFF"),
                        a!cardLayout(
                          contents: {
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: {
                                a!richTextIcon(icon: "plus"),
                                " OPEN CASE"
                              },
                              align: "RIGHT"
                            )
                          },
                          link: a!safeLink(
                            label: "",
                            uri: local!backofficelink,
                            openLinkIn: "SAME_TAB"
                          ),
                          height: "AUTO",
                          style: "#7C0058",
                          shape: "SEMI_ROUNDED",
                          marginBelow: "STANDARD"
                        )
                      },
                      width: "4X"
                    )
                  }
                )
              }
            )
          }
        )
      },
      height: if(
        local!defaulttimeperiod = "Custom",
        "SHORT_PLUS",
        "SHORT"
      ),
      showWhen: if(
        or(
          toboolean(local!ReviewForm) = true,
          toboolean(local!opencase) = true
        ),
        false,
        true
      ),
      style: "#FFE7F8",
      padding: "NONE",
      marginAbove: "NONE",
      marginBelow: "NONE"
    )

  • I wanted to reply to this because I received info from Appian support -

    Hi Brian,

    The behavior reported appears to be a known issue in which the choice values of a dropdown component would get cut off by the containing layout. This was fixed in 24.1.236.0, so I'd like to try restarting the environment to see if this fixes the issue. Could you provide a 2-hour maintenance window for us to restart the site and apply the hotfix?

    Best,

    Lyann

    Final Edit: The update did fix this issue.