Customize the ejScroller look & Feel

[marco]

Hi there,

Just see the difference between ejScroller in ejGrid and the ejScroller at http://js.syncfusion.com/demos/web/ (your demo web site).

I just want my grid scroller loolk like that.

After reading any available documentation and thread, I did go straight with CSS customization, the point is: it may look similar, but the (e-vhandle e-box e-pinch e-v-line e-icon) doesn't reach the bottom of the container, while the one i see in your demo web site, actually does reach the end of its container, so the user feel "no more to show here".

The key point here is that the size of (e-pinch) the scrollbar's cursors is computed by your script with respect of initial and final button, witch I placed at 0px dimension, then even set their display to none, but nothing to do: the cursors is always too short.

I don't want to change your script with mine and basically rebuild the whole control myself: is there any way, perhaps little documented, to achieve the result using properties of the object so that its UI part behave exactly like you demo page?

Could you please put me in the right direction to use properly ejScroller to drow itself exactly like I would without loosing any adaptive and responsive behavior you furnished along with its UI aspect?

I don't think there is need to upload any file for the demo site is public, and in its very first page there is a vertical ejScroller for the aside menu which is just what I need (don't matter colors, for I already changed them easily in the grid following the instructions.

Tank you, please find me at my e-mail at you convenience if any word is to be spent to clarify my request.

M.G.V.

[Prasanna Kumar Viswanathan]

Hi Marco, 

Thanks for contacting Syncfusion support. 

According to your requirement you need to modify the scroller size in ejGrid as per online demo web site. To achieve your requirement, use scrollerSize property of scrollSettings API. Using this property we can set the width of scrollbar. In this you have mentioned when you modify the CSS customization(e-vhandle e-box e-pinch e-v-line e-icon) you cannot reach bottom of the container. On initial rendering of scroller, the v-handle will be render as per the content height. So, when you modify the CSS customization the mentioned issue will reproduced.  

For more information, refer the below help document.  

https://help.syncfusion.com/api/js/ejgrid#members:scrollsettings-scrollersize 

Regards, 

Prasanna Kumar N.S.V 

[marco]

Hi Marco, 

Thanks for contacting Syncfusion support. 

According to your requirement you need to modify the scroller size in ejGrid as per online demo web site. To achieve your requirement, use scrollerSize property of scrollSettings API. Using this property we can set the width of scrollbar. In this you have mentioned when you modify the CSS customization(e-vhandle e-box e-pinch e-v-line e-icon) you cannot reach bottom of the container. On initial rendering of scroller, the v-handle will be render as per the content height. So, when you modify the CSS customization the mentioned issue will reproduced.  

For more information, refer the below help document.  

https://help.syncfusion.com/api/js/ejgrid#members:scrollsettings-scrollersize 

Regards, 

Prasanna Kumar N.S.V 

Hi Prasanna Kumar,

Thanks for the reply, I fear I need a few more help.

Recap the points:

1.  I want the scrollbar "ensemble" have a size of my choice;
   
2.  I want the cursor being "smoothed" which mens border-radius at least;
3.  I want rid off the "buttons"

I did as you bid and placed:

 scrollSettings: {scrollerSize:12 , buttonSize:0, autoHide:false}

First let me say that is a pity I cannot use em or rem to size the bars, but leave it apart: I wrote buttonSize:0, which should means "no button": the button are still there to be seen. I've also played a bit with the upper button of the vertical bar. It has now a style of "height:0" yet the style of its pseudoelements inherit only the with. Indeed it is impossible to get rid of it without shooting some css: there is a class ".e-icon.e-chevron-up_01:before"  that set the "content" property (and some other above that): I can get rid of the buttons only altering those classes. However the cursors of the scrollbars are now properly sized to reach the begin and the end even if I shoot at buttons.

Yet: should not 0 means zero?

I knew I need your help the moment that all my code against the ScrollObject was not even noticed. When I set aoutoHide later on, the settings is ignored. It only works in the very first creation (then what's the point to have API to change it?).

So, now, we reach two point of three: how do I get rid of the buttons in the regular Syncfusion way? (w/o shooting css, I mean).

We have seen setting their size to 0 is not working, for they have a pseudoelement with content and font-size.

Thank you for your patience, please find me at my e-mail or in this thread if any is to be provided further,

M.G.V.

[Prasanna Kumar Viswanathan]

Hi Marco, 

In previous update we mention that to modify the scrollbar size, use scrollerSize property in scrollsettings API. In this you also mentioned that you need to remove the buttons from the scrollbar. To achieve this you have tried with buttonSize property as 0, but the upper button of the vertical bar is still in the vertical scrollbar.  

To remove the upper button of the vertical bar, add the below CSS in your sample:  

.e-scrollbar .e-vscroll .e-button.e-icon { 

        display : none; 

    } 

For your convenience we have a created a sample and in this sample we have modify the scroller as per the online demo web site.  

Sample: http://www.syncfusion.com/downloads/support/forum/131998/ze/Html_Encode_Feature1880354873 

Screenshot:  

 

Regards, 

Prasanna Kumar N.S.V