We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create a Symbol palette size in percentage

Platform: JavaScript |
Control: ejDiagram |
Published Date: November 13, 2015 |
Last Revised Date: May 30, 2019

Creation of Symbol palette with different types of unit.

SymbolPalette provides a support to set the symbol palette size in two ways either percentage or pixel. If you set the symbol palette size in percentage, it will automatically converted to pixel size based on the parent element and the same will be applied as a symbolpalette size.

The following code illustrates how to create a symbol palette size in percentage.

[JS]

<style>
.symbolPalette_section
{
    width: 250px;
    height: 600px;
    float: left;
}
</style>
 
[Html]
<div class="symbolPalette_section">
        <div id="symbolpalette">
        </div>
</div>
 
<script>
        $(function () {
            //define the palettes.
            var palettes = [{
                name: "Flow Shapes",
                expanded: true,
                items: [
                    //add the flow shapes to the symbol palette
                    {
                        name: "Rectangle",
                        height: 45,
                        width: 70,
                        offsetX: 70 / 2,
                        offsetY: 45 / 2,
                        fillColor: "white",
                        borderWidth: 1.5,
                        type: "basic",
                        shape: "rectangle",
                    }, {
                        name: "Ellipse",
                        width: 70,
                        height: 70,
                        offsetX: 20,
                        offsetY: 20,
                        fillColor: "white",
                        borderWidth: 1.5,
                        type: "basic",
                        shape: "ellipse",
                    },
                ]
            }];
 
            $("#symbolpalette").ejSymbolPalette({
                diagramId: "diagram",
                palettes: palettes,
                //set the SymbolPalette size in percentage.
                height: "100%",
                width: "100%",
                paletteItemWidth: 50,
                paletteItemHeight: 50,
                previewWidth: 100,
                previewHeight: 100,
            });
        });
    </script> 

 

The following code illustrates how to set the symbol palette size in pixel.

[JS]

            $("#symbolpalette").ejSymbolPalette({
                diagramId: "diagram",
                palettes: palettes,
                //set the SymbolPalette size in percentage.
                height: "100px",
                width: "100px",
                paletteItemWidth: 50,
                paletteItemHeight: 50,
                previewWidth: 100,
                previewHeight: 100,
            });

 

Please refer the below JS Playground link for your reference.

http://jsplayground.syncfusion.com/aenbdqtn

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon