Skip to main content
yugandhara0001
Participating Frequently
June 6, 2023
Solved

Divider Line or Horizontal Line between

my requirement is to show the line in between two components (As below sample pic)

I have tried with section layout but does not  suits for my requirement,

Any inputs  ...

    stewart.burchell
    stewart.burchellAnswer
    Employee
    June 6, 2023

    You could use two card layouts, set the 'marginBelow' on the first to "NONE" and configure the decorative bar to be at the bottom and the color of your choosing. For example:

    {
  a!cardLayout(
    contents: {},
    height: "MEDIUM",
    decorativeBarPosition: "BOTTOM",
    decorativeBarColor: "#FFFF00",
    marginBelow: "NONE",
    style: "CHARCOAL_SCHEME"
  ),
  a!cardLayout(
    contents: {},
    height: "MEDIUM",
    marginBelow: "STANDARD",
    style: "CHARCOAL_SCHEME"
  )
}

    ....results in this:

    View in thread

    6 replies

    harshitb6843
    harshitb6843
    Brainy
    June 6, 2023

    Why not. Change the width and color of the divider line and it should look exactly the same.

    harshitb6843
    harshitb6843
    Brainy
    June 6, 2023

    a!cardLayout(
  style: "#000000",
  padding: "NONE",
  contents: {
    a!sectionLayout(
      divider: "BELOW",
      dividerColor: "#FFF117",
      dividerWeight: "THICK",
      marginAbove: "MORE",
      marginBelow: "MORE"
    ),
    
  }
)

      sunilc6392
      sunilc6392
      Participating Frequently
      June 6, 2023

      Hi Bhayu,

      You should change the width and color of the divider line like this :

      {
  a!sectionLayout(
    label: "Section",
    contents: {},
    divider: "BELOW",
    dividerWeight: "THICK",
    dividerColor: "#f1f50c"
  )
}

      yugandhara0001Author
      Participating Frequently
      June 6, 2023

      My requirement is 

      sunilc6392
      sunilc6392
      Participating Frequently
      June 6, 2023

      As you can see Harshit's and Stewart's codes, both code can fulfill your requirement.

      stewart.burchell
      stewart.burchellAnswer
      Employee
      June 6, 2023

      You could use two card layouts, set the 'marginBelow' on the first to "NONE" and configure the decorative bar to be at the bottom and the color of your choosing. For example:

      {
  a!cardLayout(
    contents: {},
    height: "MEDIUM",
    decorativeBarPosition: "BOTTOM",
    decorativeBarColor: "#FFFF00",
    marginBelow: "NONE",
    style: "CHARCOAL_SCHEME"
  ),
  a!cardLayout(
    contents: {},
    height: "MEDIUM",
    marginBelow: "STANDARD",
    style: "CHARCOAL_SCHEME"
  )
}

      ....results in this:

        Terms & ConditionsAccessibility statement