Positions in EJ2 JavaScript Floating action button control

10 May 202310 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

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

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

Below example demonstrates different supported positions of FAB.

index.js
index.html
styles.css
ej.base.enableRipple(true);

// Initialize the Floating Action Button control in TopLeft position
var fabObj1 = new ej.buttons.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
var fabObj2 = new ej.buttons.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
var fabObj3 = new ej.buttons.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
var fabObj4 = new ej.buttons.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
var fabObj5 = new ej.buttons.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 MiddleRight position
var fabObj6 = new ej.buttons.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
var fabObj7 = new ej.buttons.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
var fabObj8 = new ej.buttons.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
var fabObj9 = new ej.buttons.Fab({
    iconCss: 'fab-icons fab-icon-people',
    position: 'BottomRight',
    target: '#target'
});
// Render initialized Floating Action Button
fabObj9.appendTo('#fab9');
<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <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>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#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.

index.js
index.html
styles.css
ej.base.enableRipple(true);

// Initialize the Floating Action Button control
    var fab = new ej.buttons.Fab({ 
        iconCss: 'e-icons e-edit',
        cssClass: 'custom-position',
        target: '#targetElement',
    })
// Render initialized Floating Action Button
fab.appendTo('#fab')
<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#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;
}