max-height option

[alvarotrigo]

It would be nice if, apart from the height option we could use another one to specify the max-height, which means that the scroll bar will only start working if the content height is superior to that value but otherwise it wouldn't.

Right now if the height option is specified, the container will always be of that fixed height. In some cases that's not desirable. For example, a list of comments in which we want to scroll them if the height is more than 500px but in the case there are only one or two comments, we don't want to waste 500px of height. Just the needed space for the current content without scrolling.

As far as I know that's not possible right now but would be a nice feature to add.

[derbli]

+1

[AndriiBuzov]

+1, nice feature - facing same problem now.
Is there any workaround available at the moment to get max-height effect?
Thanks

[buste]

+1, same here. please help.. thanks!

[buste]

found the solution guys!

find the;
height: o.height and change to 'max-height': o.height (line: 156 and 163)

hope it will help

[cbruguera]

Well I had to comment each line where "height" was mentioned, including the whole block that begins with:
if ( 'height' in options && options.height == 'auto' ) {
...
Now it works perfectly, I just had to manually set the max-height in my div and that's it. The scrollbar appears when the max-height is reached.

[alvarotrigo]

Nice and simple solution guys. Well done!
It would be nice if this were an option for the plugin anyway.

[AndriiBuzov]

@cbruguera thanks for a tip! works for me now perfectly

[dulmanr]

👍
it only make sense that the height should be actually implemented as max-height and use fixedHeight if you want, well, a fixed height :)
most menus have flexible height depending on the number of items.
@cbruguera, thanks! tried your solution and it works great!

[TimOgilvy]

+1 Yes Please!

[phippsnatch]

@cbruguera thanks for your post, it saved me a heap of time the other day!

FYI if you'd rather not comment lines out, I poked around the source and had some luck doing the following:

• Set max-height on your content div (as normal)
• Specify a blank height : '' option to the slimscroll plugin

i.e.

$(function(){
    $('#your-content-div-with-max-height').slimScroll({
        height: ''
    });
});

This works because the plugin uses jQuery to set the height to whatever value you provide (via .css()), so a blank value will actually remove (or in this case not set) that css property.

This leaves one problem however, the scroll-rail goes ballistic (for me at least). To address this, I changed one line in the following from:

// create scrollbar rail
var rail = $(divS)
  .addClass(o.railClass)
  .css({
    width: o.size,
    height: '100%',
    position: 'absolute',
    top: 0,
    display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
    'border-radius': o.railBorderRadius,
    background: o.railColor,
    opacity: o.railOpacity,
    zIndex: 90
  });

To:

// create scrollbar rail
var rail = $(divS)
  .addClass(o.railClass)
  .css({
    width: o.size,
    height: o.height ? '100%' : '', // This worked for me
    position: 'absolute',
    top: 0,
    display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
    'border-radius': o.railBorderRadius,
    background: o.railColor,
    opacity: o.railOpacity,
    zIndex: 90
  });

If this works for other people (:question:) I'll submit a pull request :shipit:.

[ghost]

I tried both the methods @cbruguera & @phippsnatch and neither worked.
Could someone please help me out on what am i doing wrong?

I have repeating fields in my form and i just need the scrollbar to appear when the height changes.

Thanks in advance for your help!

[bartvanderwal]

+1!

[todinov]

I tried what @phippsnatch suggested and it works perfectly so far. I am not using the rails, so I haven't even patched the plugin.

[Dresel]

@phippsnatch approach worked, but when the content area is smaller than the minBarHeight the scrollbar is always shown. I had to modify the comparison within the getBarHeight function:

From

var display = barHeight == me.outerHeight() ? 'none' : 'block';

To

var display = barHeight >= me.outerHeight() ? 'none' : 'block';

[Wlada]

Hi All,

I did something what works in my case:

update defaults with maxHeight property:

            // maxheight in pixels of the visible scroll area
            maxHeight       : '',

line 113:
update height condition

                    if ('height' in options && options.height == 'auto' || options.height !== '') {

Created maxHeight condition:

                    if ('maxHeight' in options && options.maxHeight !== '') {

                        me.parent().css('max-height', options.maxHeight.substring(0, options.maxHeight.length - 2));
                        me.css('max-height', options.maxHeight.substring(0, options.maxHeight.length - 2));
                    }

Add condition on optionally set parent height

            if ('height' in options && options.height == 'auto' || options.height !== '') {
                // optionally set height to the parent's height
                o.height = (o.height == 'auto') ? me.parent().height() : o.height;
            }

Height and max height on element add like in code below:

            var wrapper = $(divS)
                .addClass(o.wrapperClass)
                .css({
                    position: 'relative',
                    overflow: 'hidden',
                    width   : o.width
                });

            // update style for the div
            me.css({
                overflow: 'hidden',
                width   : o.width
            });

            if ('height' in options && options.height == 'auto' || options.height !== '') {

                wrapper.css({
                    height: o.height
                });
                // update style for the div
                me.css({
                    height: o.height
                });

            }

            if ('maxHeight' in options && options.maxHeight !== '') {

                wrapper.css({
                    maxHeight: o.maxHeight
                });

                // update style for the div
                me.css({
                    maxHeight: o.maxHeight
                });

            }

Then call plugin like this:

                $('#element').slimScroll({
                    height: '',
                    maxHeight: '100px',
                    color : '#ccc'
                })

In this case maxHeight and Height works fine. But I'm not sure is it something broken. What I saw from my example everything works fine.

[AsifAliBhat]

this is what worked for me:
$('.full-height-scroll').slimScroll({
//height: '',
railOpacity: 0.4,
wheelStep: 10
});

I'm refereing my content Div by class, you may use Div Id.

Hope it works for u too :)

[fresjitendra]

you can use slimscroll="{height:''}" and give your own max-height like this style="max-height:150px;" or you can use youe own class

[davey013]

Since I didn't want to change the javascript file itself, I ended up by creating an external javascript function which reinitiates the slimmscroll function, based on a max height value and the current height of the 'scrollable' area. You need to call this function everytime the contents of the scrollable area are changing:

 function reinitiateSlimScroll(slimScrollEl)
 {

      var maxHeight = 400;

      // Slimscroll options here
      var slimScrollOptions = {'height': maxHeight+'px', 'alwaysVisible': true, 'railVisible': true};

      var currentHeight = slimScrollEl.get(0).scrollHeight;

      if (currentHeight > maxHeight) {
          slimScrollEl.slimScroll(slimScrollOptions);
      } else {
          slimScrollOptions['height'] = '';
          slimScrollEl.slimScroll(slimScrollOptions);
      }

 }

You call the function like this:
reinitiateSlimScroll($('.your-slimmscroll-element'));

[esamo]

Global CSS, can be controlled by class for each height settings

.slimScrollDiv {
    height: auto !important;
    min-height: 30px !important;
    max-height: 300px !important;
}

.slimScrollDiv .scroller {
    height: auto !important;
    min-height: 30px !important;
    max-height: 300px !important;
}