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. Image for the cookie policy date

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

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.

3 Replies

PO Prince Oliver Syncfusion Team February 1, 2019 07:11 AM

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. 

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


AK AMIT KUMAR JHA February 5, 2019 01:51 AM

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 

DL Deepa Loganathan Syncfusion Team February 6, 2019 01:02 PM

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. 
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/"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/"type="text/javascript"></script>  
  <script src="https://cdn.syncfusion.com/"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 class="e-card-header-image">  
      <span class="e-icon-close e-icons">  
  <div class="e-card-content">  
//set the resize icon in the card like below  
  <div class="e-icon e-resize-handle e-resizable"></div>  
     //initiate the resizable for the card  
                helper: function (event) {  
                   return $(event.element);  
For your reference, we have prepared a sample with resizable Cards. Please check the below link. 
We suggest you go through the below help pages to explore more about resizable plugin of EJ1. 
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.   
Deepa L. 

Live Chat Icon For mobile
Up arrow icon