Search results

Positions in JavaScript FloatingActionButton control

02 Feb 2023 / 3 minutes to read

The floating action button can be positioned anywhere on the target using the position property. If the target is not defined, then FAB is positioned based on the browser viewport.

The position values of Floating Action Button are as follows:

  • TopLeft
  • TopCenter
  • TopRight
  • MiddleLeft
  • MiddleCenter
  • MiddleRight
  • BottomLeft
  • BottomCenter
  • BottomRight
Copied to clipboard
import { Fab } from '@syncfusion/ej2-buttons';

// Initialize the Floating Action Button control in BottonLeft position
let fab: Fab = new Fab({
content: 'Add',
position: 'BottomLeft',
target: '#targetElement'
});

// Render initialized Floating Action Button.
fab.appendTo('#fab');

Below example demonstrates different supported positions of FAB.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { Fab } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Floating Action Button control in TopLeft position
let fabObj1: Fab = new Fab({
iconCss: 'fab-icons fab-icon-people',
position: 'TopLeft',
target: '#target'
});
// Render initialized Floating Action Button
fabObj1.appendTo('#fab1');

// Initialize the Floating Action Button control in TopCenter position
let fabObj2: Fab = new Fab({
iconCss: 'fab-icons fab-icon-people',
position: 'TopCenter',
target: '#target'
});
// Render initialized Floating Action Button
fabObj2.appendTo('#fab2');

// Initialize the Floating Action Button control in TopRight position
let fabObj3: Fab = new Fab({
iconCss: 'fab-icons fab-icon-people',
position: 'TopRight',
target: '#target'
});
// Render initialized Floating Action Button
fabObj3.appendTo('#fab3');

// Initialize the Floating Action Button control in MiddleLeft position
let fabObj4: Fab = new Fab({
iconCss: 'fab-icons fab-icon-people',
position: 'MiddleLeft',
target: '#target'
});
// Render initialized Floating Action Button
fabObj4.appendTo('#fab4');

// Initialize the Floating Action Button control in MiddleCenter position
let fabObj5: Fab = new Fab({
iconCss: 'fab-icons fab-icon-people',
position: 'MiddleCenter',
target: '#target'
});
// Render initialized Floating Action Button
fabObj5.appendTo('#fab5');

// Initialize the Floating Action Button control in MiddelRight position
let fabObj6: Fab = new Fab({
iconCss: 'fab-icons fab-icon-people',
position: 'MiddleRight',
target: '#target'
});
// Render initialized Floating Action Button
fabObj6.appendTo('#fab6');

// Initialize the Floating Action Button control in BottomLeft position
let fabObj7: Fab = new Fab({
iconCss: 'fab-icons fab-icon-people',
position: 'BottomLeft',
target: '#target'
});
// Render initialized Floating Action Button
fabObj7.appendTo('#fab7');

// Initialize the Floating Action Button control in BottomCenter position
let fabObj8: Fab = new Fab({
iconCss: 'fab-icons fab-icon-people',
position: 'BottomCenter',
target: '#target'
});
// Render initialized Floating Action Button
fabObj8.appendTo('#fab8');

// Initialize the Floating Action Button control in BottomRight position
let fabObj9: Fab = new Fab({
iconCss: 'fab-icons fab-icon-people',
position: 'BottomRight',
target: '#target'
});
// Render initialized Floating Action Button
fabObj9.appendTo('#fab9');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 SplitButton</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id="fab1" title="Top Left"></button>
        <button id="fab2" title="Top Center"></button>
        <button id="fab3" title="Top Right"></button>
        <button id="fab4" title="Middle Left"></button>
        <button id="fab5" title="Middle Center"></button>
        <button id="fab6" title="Middle Right"></button>
        <button id="fab7" title="Bottom Left"></button>
        <button id="fab8" title="Bottom Center"></button>
        <button id="fab9" title="Bottom Right"></button>
    </div>
</body>

</html>
Copied to clipboard
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.fab-container {
  position: relative;
  min-height: 310px;
  min-width: 100%;
}

@font-face {
  font-family: 'fab-icons';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="fab-icon-"],
[class*=" fab-icon-"] {
  font-family: 'fab-icons' !important;
  speak: none;
  font-size: 55px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fab-icon-people:before {
  content: "\e70a";
}

Custom position

You can define the custom position of the Floating Action Button by override the top, left, right, and bottom CSS properties using cssClass. For detailed information, refer styles.css file below.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { Fab } from "@syncfusion/ej2-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//Initialize the Floating Action Button control.
let fab: Fab = new Fab({
    iconCss: 'e-icons e-edit',
    cssClass: 'custom-position',
    target: '#targetElement',
})
// Render initialized Floating Action Button.
fab.appendTo('#fab')
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 SplitButton</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <button id='fab'></button>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
    </div>
</body>

</html>
Copied to clipboard
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-fab.e-btn.custom-position {
  left: 40px;
  top: 40px;
  bottom: unset;
  right: unset;
}