Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Floating Actions Reference

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Layout and classes

    Events

    Event Name Description Mandatory
    OnToggle Event fired after the floating actions are toggled False

    CSS Selectors

    Element CSS Class Description
    .floating-actions .is--open Set when the Floating Actions Pattern is open

    Advanced Use Case

    Change Floating Actions position

    1. Write the following CSS code in the CSS editor.

      .floating-actions {
          -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
          left: 0;
          right: auto;
      }
      
      .floating-actions-items {
          -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
          padding-left: var(--space-s);
      }
      
      .floating-actions-item {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      }
      
      .floating-actions-item-button {
          margin-left: 0;
          margin-right: var(--space-base); 
      }
      
    2. Publish and test.

    Use Floating Actions with List Records

    1. Drag the Floating Actions Pattern into the preview.

    2. In the Items placeholder, drag a List Records widget.

    3. Set the Line Separator property of the List Records to None.

    4. In the List Records, drag a Floating Actions Item.

    5. In the Floating Actions Item, use expressions to display the required content.

    6. Publish and test.

    • Was this article helpful?