Splitter problems

[George Rossopoulos]

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

[Arun Palaniyandi]

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.  

http://www.syncfusion.com/downloads/support/directtrac/128941/ze/Splitter-1233786664 

  

 

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. 

[Arun Palaniyandi]

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.  

http://www.syncfusion.com/downloads/support/directtrac/128941/ze/Splitter-1233786664 

  

 

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.