Need to implement slider when a maximum height is reached for the data loaded from backend

Question

I am loading content from back-end and appending to a div. I want the data to be displayed in two lines(height:100px). If it exceeds more then 2 lines means, I need to show the texts in a slider. I have implemented text slider. But all i need is it should slide only after it reaches its maximum height.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-pad-2 invite-circle-list">
                            <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 control-label col-pad-2 input-label invite-label">Select circle to invite people</label>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-pad-2" style="height:40px;">
                                <div class="outside prev-top">
                                    <span id="slider-prev-invite"></span>
                                </div>
                                <ul class="bxslider bxslider-invite-friends">
                                    <%
                                    for(var i in data.data) {
                                    %>
                                    <li class="radios pull-left">
                                        <input type="checkbox" name="invite<%=i%>" id="invite-all-fr<%=i%>" value="<%=data.data[i].id%>" data-name="<%=data.data[i].name%>">
                                        <label class="radio" for="invite-all-fr<%=i%>"></label><span class="invite-filter-text"><%=data.data[i].name%></span>
                                    </li>
                                    <%}%>
                                </ul>

                                <div class="outside next-top pull-right">
                                    <span id="slider-next-invite"></span>
                                </div>
                            </div>
                        </div>

This is my slider implementation code.Result will be as follw

Without slider the result is like .

What I need is, when the result exceeds a maximum height of 100 I need the slider to be activated. Otherwise displaying the text in2 lines in enough.

Answer 1

You can always add this to the div

overflow-y: scroll;
max-height: 100px;

The max-height is not supported in all browsers, just keep that in mind. I hope it helped. You can also use auto instead of scroll.