Not able to use both horizontal and vertical splitter on one content

[AMIT KUMAR JHA]

How can we use both horizontal and vertical splitter on one content. So that for single box I should be able to resize it horizontally and vertically as well.

[Prince Oliver]

Hi Amit, 

Thank you for contacting Syncfusion support. 

In splitter, we can resize the panes based on orientation mode. If it is in horizontal mode, we can resize it horizontally alone. similarly, If it is vertical mode, we can resize it vertically alone. For single pane rendering, we could not resize because split bar will not be created. Only when we work with atleast two panes, we can adjust the pane using the resize functionality in splitter control. Kindly confirm whether you are expecting to use the card component with resize functionality or using a nested splitter? 

If your requirement is to use nested splitter, please refer the below documentation link. 

https://ej2.syncfusion.com/angular/documentation/splitter/split-panes/?no-cache=1#nested-splitter 

Else, please let us know your exact requirement, this will help us to provide a prompt solution at earliest. 

Regards, 

Prince 

[AMIT KUMAR JHA]

I want to use the card component with resize functionality.

Is this feature supported?

I want to apply resize property in a card so that I can resize horizontally and vertically 

[Deepa Loganathan]

Hi Amit,  

 

Thanks for your update.  

 

We understood your requirement for resizable Card components.  

 

EJ2 Card is standalone component completely based on CSS customization and does not require any script for rendering and it hence does not support resizable feature. For more information on Card component, please check the below help page. 

 

Card Overview: https://ej2.syncfusion.com/documentation/card/getting-started  

 

 

However, you can extend the functionality of Card component by using the EJ1 resizable plugin. For this you need to refer the Scripts and themes of resizable plugin and initialize the EJ2 card component with the plugin. We have showcased this in the below code block. 

 

<!-- Essential JS 1 bootstrap theme -->  

<link rel='nofollow' href="https://cdn.syncfusion.com/16.1.0.24/js/web/ej.widgets.core.bootstrap.min.css"rel="stylesheet" type="text/css"/>  

  

<!-- Essential JS 1 script reference -->  

<script src="https://cdn.syncfusion.com/js/assets/external/jquery-3.1.1.min.js"type="text/javascript"></script>  

<script src="https://cdn.syncfusion.com/16.1.0.37/js/common/ej.core.min.js"type="text/javascript"></script>  

  <script src="https://cdn.syncfusion.com/16.1.0.37/js/common/ej.draggable.min.js"type="text/javascript"></script>  

  

  

<div tabindex="0" class="e-card" id="basic_card">  

  <div class="e-card-header">  

    <div class="e-card-header-caption">  

    </div>  

    <div class="e-card-header-image">  

      <span class="e-icon-close e-icons">  

      </span>  

    </div>  

  </div>  

  <div class="e-card-content">  

  </div>  

//set the resize icon in the card like below  

  <div class="e-icon e-resize-handle e-resizable"></div>  

</div>  

  

<script>  

     //initiate the resizable for the card  

     $('#basic_card').ejResizable({  

          

                helper: function (event) {  

                   return $(event.element);  

                }});  

  </script>  

 

 

For your reference, we have prepared a sample with resizable Cards. Please check the below link. 

 

http://plnkr.co/edit/zHYe3GdamQ2kUOpvJNSB?p=preview 

 

We suggest you go through the below help pages to explore more about resizable plugin of EJ1. 

 

Online Demo Link: http://js.syncfusion.com/demos/web/#!/bootstrap/draggable/Resizable  

 

API reference for Resizable plugin: https://help.syncfusion.com/api/js/ejresizable#members  

 

Please let us know in case if you would need any further assistance.   

 

Regards,  

Deepa L.