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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142400 Jan 31,2019 01:41 PM UTC Feb 6,2019 06:02 PM UTC Angular - EJ 2 3
loading
Tags: Card
AMIT KUMAR JHA
Asked On January 31, 2019 01:41 PM UTC

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 [Syncfusion]
Replied On February 1, 2019 12:11 PM UTC

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. 

Regards, 
Prince 


AMIT KUMAR JHA
Replied On February 5, 2019 06:51 AM UTC

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 [Syncfusion]
Replied On February 6, 2019 06:02 PM UTC

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/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. 
 
 
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.   
 
Regards,  
Deepa L. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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

Live Chat Icon For mobile
Live Chat Icon