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

Splitter problems

Hi
1. Splitter buttons on mobile devices
have you tried to push the splitter hide left/right buttons on mobile devices?
Is impossible, perhaps need a better design. First are very close to each other and second need to be larger.
2. Splitter paneSize percent does not work
the follow does not work
***********************************************
 <ej-splitter id="dxmapSplitter" is-responsive="true" resize="re_onResizeSplitterMap" expand-collapse="re_onResizeSplitterMap">
                            <e-split-panes paneSize="80%">
                                <e-split-pane>
                                    <e-content-template>
                                        <div id="mymap" class="m34map">
                                        </div>
                                    </e-content-template>
                                </e-split-pane>
                                <e-split-pane paneSize="20%">
                                    <e-content-template>
                                        @Html.Partial("mapfilters.cshtml")
                                    </e-content-template>
                                </e-split-pane>
                            </e-split-panes>
                        </ej-splitter>
********************************************************
I used javascript to solve the problems.
Anyway you can check https://dxcenter.com/dxspots
to see both problems with splitters
Thank you in advance for your help
George

2 Replies

AP Arun Palaniyandi Syncfusion Team February 20, 2017 12:33 PM UTC

Hi George, 
 
Thanks for contacting Syncfusion support. 
 
Query 1:” Splitter buttons on mobile devices. have you tried to push the splitter hide left/right buttons on mobile devices? 
We have provided the splitpane with default width of 9px. This can be customized by overriding the CSS of splitpane and the icons to your required size. Please find the style below. 

<style> 

         .e-splitter .e-splitbar.e-h-bar { 
              width: 14px; 
         } 
 
 
         .e-splitter .e-splitbar > .e-icon.e-arrow-sans-left:before { 
             font-size: 18px; 
         } 
 
 
         .e-splitter .e-splitbar > .e-icon:before { 
             font-size: 18px; 
         } 
 
   
</style> 


Query2:” Splitter paneSize percent does not work 
After analyzing, we found that you have used the paneSize attributes wrongly .You have to use this inside the e-split-pane tag Helper and this attribute correct code is pane-size. Please find the below code. 
 
 
<ej-splitter id="dxmapSplitter" height="250" width="400" is-responsive="true" resize="re_onResizeSplitterMap" expand-collapse="re_onResizeSplitterMap" enable-auto-resize="true" orientation="@Orientation.Horizontal"> 
        <e-split-panes> 
            <e-split-pane pane-size="80%"> 
                <e-content-template> 
                    <div class="cont"> 
                        Pane 1 
                    </div> 
                </e-content-template> 
            </e-split-pane> 
            <e-split-pane pane-size="20%"> 
                <e-content-template> 
                    <div class="cont"> 
                        Pane 2 
                    </div> 
                </e-content-template> 
            </e-split-pane> 
        </e-split-panes> 
    </ej-splitter> 
 
 
 
We have also prepared a sample for your convenience below.  
  
 
If the provided sample does not meet your requirement, please get back to us with more information that will help us to provide the solution at earliest.  

Regards, 
Arun P. 



AP Arun Palaniyandi Syncfusion Team February 20, 2017 12:33 PM UTC

Hi George, 
 
Thanks for contacting Syncfusion support. 
 
Query 1:” Splitter buttons on mobile devices. have you tried to push the splitter hide left/right buttons on mobile devices? 
We have provided the splitpane with default width of 9px. This can be customized by overriding the CSS of splitpane and the icons to your required size. Please find the style below. 

<style> 

         .e-splitter .e-splitbar.e-h-bar { 
              width: 14px; 
         } 
 
 
         .e-splitter .e-splitbar > .e-icon.e-arrow-sans-left:before { 
             font-size: 18px; 
         } 
 
 
         .e-splitter .e-splitbar > .e-icon:before { 
             font-size: 18px; 
         } 
 
   
</style> 


Query2:” Splitter paneSize percent does not work 
After analyzing, we found that you have used the paneSize attributes wrongly .You have to use this inside the e-split-pane tag Helper and this attribute correct code is pane-size. Please find the below code. 
 
 
<ej-splitter id="dxmapSplitter" height="250" width="400" is-responsive="true" resize="re_onResizeSplitterMap" expand-collapse="re_onResizeSplitterMap" enable-auto-resize="true" orientation="@Orientation.Horizontal"> 
        <e-split-panes> 
            <e-split-pane pane-size="80%"> 
                <e-content-template> 
                    <div class="cont"> 
                        Pane 1 
                    </div> 
                </e-content-template> 
            </e-split-pane> 
            <e-split-pane pane-size="20%"> 
                <e-content-template> 
                    <div class="cont"> 
                        Pane 2 
                    </div> 
                </e-content-template> 
            </e-split-pane> 
        </e-split-panes> 
    </ej-splitter> 
 
 
 
We have also prepared a sample for your convenience below.  
  
 
If the provided sample does not meet your requirement, please get back to us with more information that will help us to provide the solution at earliest.  

Regards, 
Arun P. 


Loader.
Up arrow icon