Posts

Showing posts from December, 2018

Donate

Uncheck Parent Node Only If All Children Are Unchecked In jsTree.js

Hello all, I was confronted with a minor issue in jsTree.js on how to uncheck a parent only if all it's child notes are unchecked. I checked on the documentation if there's an existing property or attribute that will be set to achieve this functionality. Since there is none, I decided to just do the coding stuff to solve this problem. The logic behind this is that get the parent node and it's direct descendants. If there are child nodes, loop through those elements and if one of them is still checked, the parent node remains checked. But to make this work, the properties cascade up and three_state should be set as 'up' and 'false'. $( '#jsEmployees' ).jstree({ 'checkbox' : { keep_selected_style: false , three_state: false , cascade: 'up' }, 'core' : { 'themes' : { 'icons' : false } }, 'plugins' : [ "defaults" , "checkbox" ], 'expand_selected_onload'

Div Inside A Parent Div That Has A Class col-md-2 Is Overlapping In Internet Explorer 11

Hello, I have a div inside a parent div that overlaps when rendered in Internet Explorer 11 browser. The parent div has a col-md-2 class. Other browsers such as Edge, Firefox and Chrome doesn't show this irregularity. After doing some spikes and testing, the solution for this is to set the child div's class to "row". <div class= "row" id= "chartReport" ></div> And in your css, remove the width and margin styles of the child div. #chartReport { border : 2px solid lightgray; background-color : white; /*width: 300px;*/ /*margin: 15px;*/ } Cheers!

Chart.js Small And Not Readable If Rendered Inside col-md-2 div.

Given the task at hand which is to show a chart report to customers inside the left menu div that has col-md-2 class, the chart isn't readable and small as reported by the users. The fix that I came up with was to the the height and width explicitly of the canvass element and adjust it's values to make the chart readable. <canvas id= "DeliveriesByDayCanvas" width= "600" height= "550" ></canvas>

Bootstrap Table Apply Word Break To <th> Cell Text

To apply word-break to a Bootstrap-Table <th> cell text by Wenzhixin, create a css style that set's the inner div of <th> white-space to normal !important and word-wrap to break-word. .tdOverviewTotalIllustrations div .th-inner { white-space : normal !important ; word-wrap: break-word; } Then in Bootstrap-Table's <th> element, set the data-class attribute to the defined style above. <th data-field= "totalIllustrations" data-sortable= "true" data-searchable= "true" data-class= "tdOverviewTotalIllustrations" >Total Illustrations</th>

How To Fix Or Freeze The Column Headers Of A Bootstrap Table

Image
Good evening! We've been requested by the client if we can freeze the column headers of the Bootstrap Table By Wenzhixin given the records loaded to the bootstrap-table is more than a hundred. I've tried using jQuery and CSS approaches and none of them work. Either they destroy the table layout or make a mess of the data. After scanning to the docs, the suggestion was to set the height of the table as mentioned by the author. So to mimic freeze table headers, you need to set the data-height of the bootstrap-table explicitly. Code: data-height="700" Output

Donate