Gregory's Blog

Kendo scrollview

I have been using the scroll view on my home site at quite a bit, and wanted to pass along a few tips.

If you want to change the button size on the scroll view, use the following css. The default font-size is around 2em, to make the right and left arrows bigger, use anywhere from 6-8em, and 1em to make the arrows a bit smaller.

view plain about
1#nameOfScrollViewDiv .k-scrollview-next span, .k-scrollview-prev span {
2    font-size: 8em;

To use the scrollview to display a lot of text, I used the following approach.

First, we need to use data-role='page' and create a 'white-space:normal' style for every element in order to allow for the text to wrap properly instead of going off of the scrollview page:

view plain about
1<div id="developmentScrollView" class="blueGradient">
2    <!-- This is used for every page -->
3    <div class="getConnected" data-role="page" style="white-space:normal;">

To constrain the text and allow the arrows to be seen visibility on the right and left, I created a css class for the div that contains the actual scrollview, and wrapper classes that constrain the text information in the proper spot.

The class for the scrollview div (the outer class in this case):

view plain about
1/* Scroll view outer containers within the content blocks. */
2#developmentScrollView {
3    /* Text color */
4    color: rgba(255, 255, 255, 0.9);
5    height: var(--scrollViewHeight);
6    width: var(--scrollViewWidth); /* Don't use dynamic css vars set when the page loads. It screws stuff up. */
7    margin: auto;    
8    z-index: 2; /* This needs to be higher than the nav blocks */

And the three wrapper classes: the first class (firstScrollviewWrapper) is used on the first slide, and the second class (scrollviewWrapper) controls all of the slides after the first and last slide, and the last class (lastScrollviewWrapper) is used for the very last slide. These are used to keep the text separated from the arrows in order to make the arrows more visible.

view plain about
1.firstScrollviewWrapper {
2    position: relative;
3    display: table;
4    left: 0%; /* The 2nd and x slides there after start to the right of the left arrow. */
5    right: 10%;
6    margin: auto;
7    width: 80%; /* the width of the scroll view container. */
8    text-align: left;
9    font-family: var(--scrollViewFont);
10    font-size: var(--scrollViewFontSize);
13.scrollviewWrapper {
14    position: relative;
15    display: table;
16    left: 0%; /* The 2nd and x slides there after start to the right of the left arrow. */
17    right: 10%;
18    margin: auto;
19    width: 80%; /* the width of the scroll view container. */
20    text-align: left;
21    font-family: var(--scrollViewFont);
22    font-size: var(--scrollViewFontSize);
25.lastScrollviewWrapper {
26    position: relative;
27    display: table;
28    left: 0%; /* The 2nd and x slides there after start to the right of the left arrow. */
29    right: 0%; /* The last slide does not have a right arrow that we need to leave room for. */
30    margin: auto;
31    width: 80%; /* the width of the scroll view container. */
32    text-align: left;
33    font-family: var(--scrollViewFont);
34    font-size: var(--scrollViewFontSize);

A demonstration of my approach can be seen on my home page.

Note: I am using css variables for the font family and font size.

This entry was posted on April 16, 2019 at 7:57 PM and has received 13 views.

There are currently 0 comments.

Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Gregory's Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.


Portions of Gregory's Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.