Search results

Globalization in JavaScript Splitter control

RTL

Specifies the direction of the Splitter component using the enableRtl property. For writing systems that require it like Arabic, Hebrew, etc., the direction can be switched to right-to-left.

The following code shows how to enable RTL behavior.

Source
Preview
app.ts
index.html
index.css
import { Splitter } from '@syncfusion/ej2-layouts';

let splitObj: Splitter = new Splitter({
    paneSettings: [
       { content:'Left Pane' },
       { content:'Middle Pane' },
       { content:'Right Pane' }
    ],
    enableRtl : true,
    height: '250px'
});
splitObj.appendTo('#splitter');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Splitter </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Uploader Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.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'>
        <!--element which is going to render the splitter-->
        <div id="splitter">
        </div>
    </div>
</body>

</html>
#container {
    margin: 60px auto;
    width: 600px;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.content {
    padding: 9px;
}

.e-pane {
    align-items: center;
    display: grid;
}

See Also

Contents
Contents