I have handson table, and my same col have custom borders
customBorders: [{
range: {from:{row:0,col:5},to:{row:_rowsCount,col:7}},
left: {width: 2,color: '#5292F7'},
right: {width: 2,color: '#5292F7'}
}]
afterCreateRow my borders don't redraw and last row don't have my custom borders
How I can fix it?
You need to call to the render function.
myHoT.render();
afterCreateRow : function(index, amount, source) {
_rowsCount += 1;
handsontable.updateSettings({
customBorders: [{range: {from:{row:0,col:5},to:{row:_rowsCount,col:7}},
left: {width: 2,color: '#5292F7'},
right: {width: 2,color: '#5292F7'}
}],
});
handsontable.render();
});
NOT WORK!
Related
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I tried a lot of solutions that I have found here and in Google, but no one of them works.
The table is dynamically generated by jQuery and Javascript.
Question:
How can I remove the padding, border between the cells in this html table ?
This is the HTML code:-
<div class="board">
<table id="tableGame">
</table>
</div>
This is the Css Code
.board{
float:left;
display: inline-block;
}
table{
border-collapse: collapse;
}
table tr, td{
border: 0px;
}
Javascript Code below
function mapGenerate(){
var map=createMap(); // this function returns a 2d array filled of random 1 and 0
/* example
map = [[1,1,1,1,0],
[1,0,0,0,0],
[1,0,1,1,1],
[1,0,0,0,1],
[1,1,1,0,1]]
*/
//loop the 2d array map and change the number with the appropriate img
for(var i = 0; i < map.length; i++) {
var innerArrayLength = map[i].length;
for(var j = 0; j<innerArrayLength; j++){
//loop the nested arrays so i can change the 1 and the 0 with the appropriate img
if(map[i][j] === 0){
map[i][j]="<img class=\"walkble\" src=\"mapTiles/floorResized.png\">"; //you can walk this part of the map
}else{
map[i][j]="<img class=\"nonWalkble\"// you cannot walk This part of the map src=\"mapTiles/volcanoresize.png\">";
}
;
}
$("#tableGame").append("<tr><td>"+ map[i] + "</td></tr>") // Here i print the elements of the array
}
}
mapGenerate();
Link to jsfiddle under here.
The problem is not about the 3rd white line ( it only appears in js fiddle, if I open it in my browser they looking as a normal table).
The problem is only to delete that disturbing padding between the cells.
jsfiddle
In codepen you will see it better, without lines error.
codepen
looks like the problem is on line 80 of your javascript.
$("#tableGame").append("<tr><td>"+ map[i] + "<td></tr>")
you're concat-ing an array (map[i]) into a string. javascript by default "stringify" it by joining it with commas.
The code above is like:
$("#tableGame").append("<tr><td>"+ map[i].join() + "<td></tr>")
since the default joining string is comma, that's equivalent to
$("#tableGame").append("<tr><td>"+ map[i].join(',') + "<td></tr>")
To get rid of the commas you simply joining it with an empty string
$("#tableGame").append("<tr><td>"+ map[i].join('') + "<td></tr>")
In HTML, there are attributes border, cellpadding, and cellspacing on the <table> element. Set them to 0. <table border="0" cellpadding="0" cellspacing="0">.
Border is for the border width.
Cellpadding is for the padding in the table cells.
Cellspacing is for the space between the table cells.
css:
table { border-collapse: collapse; }
table td { padding:0; }
I'm a new one in css and can not to set up the max-width of my confirmation dialog properly. Here my code of calling dialog:
this.$mdDialog.show({
content: longText,
ok: 'OK',
cancel: 'CANCEL'
clickOutsideToClose: true,
});
The problem is that my longText doesn't carry and my dialog is very stretched horizontally.
I tried to add style.less locally and determine max-width like this:
.md-dialog {
max-width: 300px;
}
But there is no changes.
Could some one help me?
To achieve what you want you should use this way:
.md-dialog-content {
max-width: 300px;
}
you can try
md-dialog{
max-width: 300px;
}
because md-dialog is not a class it is directive which angular material predefine
Hello there, I just created this datepicker thingy which turned out pretty cool except that it creates some really annoying and weird looking white space below the divs when empty and appears higher, see the fiddle > http://jsfiddle.net/VtKkM/2/ Any help is greatly appreciated!
Haven't figured out the problem as of yet, but it seems that it doesn't like it when the spans are empty. One workaround, at least for now, is to replace your blank options with just a space ( ) so that there's still the illusion that it's empty but the spans still technically contain a value. This may not be a permanent solution, but it'll work for now.
To elaborate:
Line 2 of your js would go from
var days = '<option></option>',
to
var days = '<option> </option>',
and line 32 would go from }).parent().prepend('<span></span>'); to }).parent().prepend('<span> </span>');
Its for line height and your font size of page you can fix it by
Add line height style to your datePicker class like this:
line-height: 8px;
or change font-size like:
font-size: 10px;
Edit:
and for moving when you pick a some value from select you should set your span to position: absolute;
.datePicker > div > span{
position: absolute;
}
Edit2:
or you can set space value in first time in your span, change <span></span> to <span> </span>
Edit3:
i changed this lines to add space in initial between span tag, check values that add onload datepicker:
$.each(picker.children(), function () {
$(this).wrap('<div>').change(function () {
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val() - 1]);
} else {
$(this).prev().html($(this).val());
}
}).parent().prepend('<span> </span>');
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val()]?months[$(this).val()]:" ");
} else {
$(this).prev().html($(this).val()?$(this).val():" ");
}
});
Edit 4:
and css way, you can fixed it by add padding style to empty span like this:
.datePicker > div > span:empty{
padding:5px;
}
.datePicker > div {
display:inline;
position:relative;
min-width: 18px;
min-height:28px;
padding:0 5px 0 5px;
}
Just change display:inline-block to display:inline
The part about it appearing high I could fix with giving .datePicker select a 5px margin.
I get a MySQL query with detail rows and total. I would love to use Tablesorter child rows functionality to hide the details rows but face the problem that need to convert the csv file into html (no problem with that) but my total rows are at the bottom of every list of detailed rows, not above.
The question is, can I use Tablesorter child rows in a way that clicking the link related upper rows unfold?
My sample table (before converting it to html) is:
n_cli n_inv date_inv date_due eur +exp
----------------------------------------------------------------------------------
10289 21222321-1 2012-10-04 2012-12-30 1,031.05 1,072.29
10289 21222479-1 2012-10-09 2012-12-30 257.28 267.57
----------------------------------------------------------------------------------
Total CUSTOMER1 NAME 1,288.33 1,339.86
10416 21110039-1 2011-06-22 2011-06-22 136.28 145.28
----------------------------------------------------------------------------------
Total CUSTOMER2 NAME 136.28 145.28
By the way, can I use Child Rows with three levels of details? for instance, "total sales per customer / total per invoice/ product lines per invoice" ?
Thanks,
EDITED: This is the source (sample) file:
n_cli;n_inv;date_inv;date_due;eur;+exp
10289;21222321-1;2012-10-04;2012-12-30;1,031.05;1,072.29
10289;21222479-1;2012-10-09;2012-12-30;257.28;267.57
Total;CUSTOMER1 NAME;;;1,288.33;1,339.86
10416;21110039-1;2011-06-22;2011-06-22;136.28;145.28
Total;CUSTOMER2 NAME;;;136.28;145.28
And my html, which is obviously not working as I am unable to:
Edit the CSVTOTABLE process through the loadComplete function (¿?) in
order to tag the rows to show and the rows to hide.
Hide the upper rows (above Total) instead of bottom rows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/js/ts/css/theme.default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="/js/csv/js/jquery.csvToTable.js"></script>
<script>
$(function() {
$('#tabla1').CSVToTable('dat.txt',
{
startLine: 0,
separator: ";"
}
).bind("loadComplete",function() {
$(document).find('#tabla1').tablesorter({widgets:
["zebra", "stickyHeaders"]});
});;
});
</script>
</head>
<body>
<div>
<table id="tabla1" class="tablesorter">
</div>
</table>
</body>
</html>
So, you can use the CSVToTable load complete callback function to modify the table however you want.
I put together this code & demo* to show how you can assign child rows and make the rows above the total collapsible:
$(function () {
$('table')
.CSVToTable('csv.txt', {
startLine: 0,
separator: ';'
})
.bind("loadComplete", function () {
$('table')
.find('td:contains("Total")')
.each(function () {
var $cell = $(this).prepend('<i/>'),
$totalRow = $cell.parent().addClass('totals tablesorter-childRow'),
group = $totalRow.prevUntil('.totals');
group.last().addClass('tablesorter-parentRow');
group.slice(0, -1).addClass('tablesorter-childRow');
}).end()
.tablesorter({
theme: 'blue',
widgets: ["zebra", "stickyHeaders"]
})
.find('tr.totals').click(function () {
$(this)
.toggleClass('collapsed')
.prevUntil('.totals').toggle();
});
});
});
*The demo isn't using the CSVToTable script, but the added HTML would be the same.
The arrow inside the "Total" cell is styled by css, so you can change them as desired:
/* collapsed arrow */
tr.totals.collapsed td i {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #888;
border-right: 0;
margin-right: 10px;
}
tr.totals td i {
display: inline-block;
width: 0;
height: 0;
border-bottom: 4px solid transparent;
border-top: 4px solid #888;
border-right: 4px solid #888;
border-left: 4px solid transparent;
margin-right: 7px;
}
Update: Because you are folding the rows up, you'll need a custom parser to find the custom names in the last row instead of the first, so it sorts properly. Here is the parser to use and an updated demo
$.tablesorter.addParser({
id: 'findname',
format: function (s, table, cell, cellIndex) {
var $cell = $(cell).parent().nextAll('tr.totals').eq(0).find('td').eq(cellIndex);
return $cell.text();
},
// set type, either numeric or text
type: 'text'
});
Update #2: Well, you'll need another parser for numeric columns so they sort properly as well; here's an updated demo:
$(function () {
$.tablesorter.addParser({
id: 'findname',
format: function (s, table, cell, cellIndex) {
var $cell = $(cell).parent().nextAll('tr.totals').eq(0).find('td').eq(cellIndex);
return $cell.text();
},
type: 'text'
});
$.tablesorter.addParser({
id: 'findnumber',
format: function (s, table, cell, cellIndex) {
var $cell = $(cell).parent().nextAll('tr.totals').eq(0).find('td').eq(cellIndex);
return $.tablesorter.formatFloat($cell.text(), table);
},
type: 'numeric'
});
$('table')
.CSVToTable('csv.txt', {
startLine: 0,
separator: ';'
})
.bind("loadComplete", function () {
$('table')
.find('td:contains("Total")')
.each(function () {
var $cell = $(this).prepend('<i/>'),
$totalRow = $cell.parent().addClass('totals tablesorter-childRow'),
group = $totalRow.prevUntil('.totals');
group.last().addClass('tablesorter-parentRow');
group.slice(0, -1).addClass('tablesorter-childRow');
}).end()
.tablesorter({
theme: 'blue',
headers: {
1: { sorter: 'findname' },
4: { sorter: 'findnumber' },
5: { sorter: 'findnumber' }
},
widgets: ["zebra", "stickyHeaders"]
})
.find('tr.totals').click(function () {
$(this)
.toggleClass('collapsed')
.prevUntil('.totals').toggle();
});
});
});
Update #3
To style the parent and child rows separately, you can use the applied class names tablesorter-parentRow and tablesorter-childRow, but to avoid confusion, I renamed the tablesorter-parentRow to tablesorter-firstChildRow because within the plugin it is actually the parent row, but for styling purposes, it would be better to name it as a child row since we're working form the bottom up. The "Totals" row also has the class name tablesorter-childRow applied to it, so in order to differentiate it you can use the totals class name instead.
Anyway, here is an updated demo with the class name change and css, as well as the addition to make sure it only targets cells in the tbody (.find('tbody td:contains("Total")'))
/* child row styling */
.tablesorter-firstChildRow td, .tablesorter-childRow td {
color: red;
}
/* Totals row */
tr.totals td {
color: blue;
}