Sunday, 6 December 2015

Bootstrap div vertical scrollbar and dynamic checkbox

1) Dynamicaly add CheckBox into bootstrap column with scrollbar

                    html=""
                    html += '<div class="testCont"  style="max-height: 200px;overflow: auto;overflow-x: hidden;min-height:150px">'
                    for (var i = 0; i<r.message.get_test_data.length; i=i+2) {
                        // html += "<input type='checkbox' class='select' id='_select' name='"+r.message.get_test_data[i][0]+"' value='"+r.message.get_test_data[i][0]+"'>"+r.message.get_test_data[i][0]+"<br>"
                        html += "<div class='row'>  <div class='col-sm-6'>"
                        html += "<input type='checkbox' class='select' id='_select' name='"+r.message.get_test_data[i][0]+"' value='"+r.message.get_test_data[i][0]+"'>"+r.message.get_test_data[i][0]+ "</div>"
                        html +=     "<div class='col-sm-6'>"
                        if(r.message.get_test_data[(i + 1)]){
                            j=i+1;
                            html +=     "<input type='checkbox' class='select' id='_select' name='"+r.message.get_test_data[j][0]+"' value='"+r.message.get_test_data[j][0]+"'>"+r.message.get_test_data[j][0]+ "</div> </div>"
                        }
                    }
2)  Some Property of bootstrap scrollbar
    To show scrollbar use overflow: true;
    this will show both horizontal and vertical scrollbar
    <div class="testDiv"  style="max-height: 200px;overflow: auto;">
    </div>
  
   To show only vertical scrollbar use overflow-x: hidden
    <div class="testDiv"  style="max-height: 200px;overflow: auto;overflow-x: hidden;min-height:150px">
    </div>

No comments:

Post a Comment