render chart view
how the chart looks
So I feel like I've tried everything under the sun to remove that red rectangle above the chart. Anyone know how to remove it? Most of the examples with setting up options and legend like below might work with chartjs but not vue-chartjs if I'm not mistaken.
options: {
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
You litterly posted the answer yourself, the second object in the renderChart function is the options object so if you put it like this it will work:
{ responsive: true, maintainAspectRatio: true, legend: { display: false } }
Next time please dont post a screenshot of your code but include it as text in your post since it is a lot easyer to read and use for people
Related
Inside a tippy-js v6.3.7 tooltip, I have a 1px height div with background-color: #333. The div is randomly appearing blurred on some tooltips and not others. Removing the transform property on data-tippy-root fixes it but positions the tooltip in the upper-left.
Your answer saved me a ton of time, thanks Vael Victus! One more thing: you are missing a pair of {}, it should be:
popperOptions={{ modifiers: [{ name: 'computeStyles', options: { gpuAcceleration: false } }] }}
I discovered the problem resulted from the transform property used to position the tooltip itself. Tippy v6 uses popper v2, which defaults to positioning this way. You can disable it via popper's gpuAcceleration setting. Here's how I fixed it through Tippy.
opts = {
...opts,
popperOptions: {
modifiers: [{
name: 'computeStyles',
options: {
gpuAcceleration: false, // true by default
},
}]
}
}
tp = tippy(elem, opts);
Firefox did not have this rendering problem, and both Chrome 94 and 96 did.
I have a problem with Swiperjs, that I'm trying to make the crossfade, but it doesn't crossfade like it should, but between showing the two images it adds approximately 20% white overlay between the two images.
Hard to describe, but as if it would first fade the image to 20% white overlay, so the image brightens a bit and then it fades to the next image. So maybe it's not obvious, but still not the same as
JS:
var mySwiper = new Swiper('.swiper-container', {
lazy: true,
loop: true,
speed: 2000,
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
Just standard Swiper JS, nothing fancy here which would change how the animation behaves. HTML exactly the same as on their page, not changed.
I'm going through the same thing.I try to add "animation" function below the transition(duration) function.But error was throw said "animation was not a function".I don't know why I can't add my own function in the javascript source file swiper-bundle.js.And if modify the transition(duration) function directly it dosen't work either.Maybe I need read the source file deeply.
I am using DataTables with the responsive extension on our web application, but I have a question.
When the table is made responsive, it should hide the pagination option.
I tried this with "bLengthChange": false:
$(function () {
$("#table1").DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"
},
"order": [[1, "asc"]],
"bAutoWidth": false,
responsive: {
details: {
type: 'column'
},
"bLengthChange": false
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
});
});
However, this does not work. My target is that I can see the pagination amount dropdown menu on fullscreen, but that option should be hidden if responsive.
Can I add options like bLengthChange specific to the "responsive" state?
Can I add options like bLengthChange specific to the "responsive"
state?
No, you cannot. Try inspect $.fn.dataTable.Responsive.defaults again, as I believe you already have done. It does not give so much sense either, the responsive extension is an extension while lengthMenu is a core feature. If you want to hide the lengthMenu you would need to reinitialise the table or do something hackish that may or may not conflict with other features or other extensions. But you can do the hack yourself. Hook into the responsive-resize event and hide or show the lengthMenu according to the responsive status :
table.on( 'responsive-resize', function ( e, datatable, columns ) {
var $lengthMenu = $('.dataTables_length')
var count = columns.reduce( function (a,b) {
return b === false ? a+1 : a;
}, 0 );
if (count>0 && $lengthMenu.is(':visible')) $lengthMenu.hide()
if (count<= 0 && !$lengthMenu.is(':visible')) $lengthMenu.show()
} );
demo -> http://jsfiddle.net/v1dnxLkg/
Thank you.
Fixed it with this CSS:
#media screen and (max-width: 767px){
div.dataTables_wrapper > div.row > div > div.dataTables_length{
display: none;
}
}
Having problems with my table header becoming misaligned when I use "sScrollY". The header realigns itself only after I sort a certain column by clicking on one of the headers.
Misaligned.
Corrected only After I click on a sort header.
My Setting:
oTable = $('#userslist').dataTable({
"bJQueryUI": true,
"bRetrieve": true,
"sScrollY": "150px",
"bAutoWidth" : true,
"bPaginate": false,
"sScrollX": "100%",
"sScrollXInner": "100%",
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"sDom": '<"H"lfr>t<"F"<"useraccountbtn">>',
"aaData": datan,
"aoColumns": [
{ "mDataProp": "uid"},
{ "mDataProp": "fn" },
{ "mDataProp": "un" },
{ "mDataProp": "pw" },
{ "mDataProp": "em" },
{ "mDataProp": "ac" }
]
});
I've also tried fnAdjustColumnSizing() which every Google Search seems to be suggesting but it doesn't do anything for me.
I have fix this way;
wrap the table with div and
CSS
overflow:auto;
height: 400px;
position:relative;
Remove
“sScrollY”
"sScrollX"
I've had to delay when data is loaded because when page loads it does not see the scroll bar and table headers get misaligned. But if I delay it, it sees the scroll bar and the table header matches up perfect.
<button onclick="delayload('loadusers()')">Load Table</button>
function delayload(f){
setTimeout(f,50)
}
function loadusers() {
oTable = $('#userslist').dataTable({
"bJQueryUI": true,
"bRetrieve": true,
"sScrollY": "150px",
"bAutoWidth" : true,
"bPaginate": false,
"sScrollX": "100%",
"sScrollXInner": "100%",
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"sDom": '<"H"lfr>t<"F"<"useraccountbtn">>',
"aaData": datan,
"aoColumns": [
{ "mDataProp": "uid"},
{ "mDataProp": "fn" },
{ "mDataProp": "un" },
{ "mDataProp": "pw" },
{ "mDataProp": "em" },
{ "mDataProp": "ac" }
]
});
}
I had to remove the scrolling manually, because nothing else worked. Then I used #Suresh Kamrushi 's answer to make an external scrolling div
Here's the code if anyone needs it :)
//replace all scroll-related divs with their content (aka unwrap the content)
$('.table-responsive').replaceWith($('.table-responsive').html());
$('.dataTables_scroll').replaceWith($('.dataTables_scroll').html());
$('.dataTables_scrollHead').replaceWith($('.dataTables_scrollHead').html());
$('.dataTables_scrollBody').replaceWith($('.dataTables_scrollBody').html());
$('.dataTables_scrollHeadInner').replaceWith($('.dataTables_scrollBody').html());
$('.dataTables_sizing').each(function (index, value) {
$(this).replaceWith($(this).html());
});
//Re-size the header
$('#table_view_subs thead tr').attr("style","height:37.6px");
//add external scroll div
$("#table_view_subs").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
It's very hacky, but if you've lost a week and your patience trying to get the DataTable to behave, you're not gonna care
Well, whenever you sort or filter and the contents of the table change in some way, fnDraw gets called. If an extra fnDraw is working (via clicking your sorting header after the table has loaded), and it isn't tied to bServerSide then trying an extra call to oTable.fnDraw() couldn't hurt.
Using ScrollX or scrollY create such problems. there is a work around for it:
$('#userslist').DataTable({
"initComplete": function (settings, json) {
$("#reportDetails").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});
First remove ScrollX or scrollY if you have in your page and add above code to fix it.
Try this:
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
I also had problems with ScrollX.
With wide tables it is a very big help. With narrow tables, as in the problem case above, I also had the same problem.
The problem arises because 3 tables are also made in one table. One for the header, one for the data and one for the footer.
The data part has the correct width. The header and footer are too short, so I enlarged them using CSS:
// Scroll-X
DIV.dataTables_scrollHeadInner,
DIV.dataTables_scrollFootInner{
min-width: 100%;
}
DIV.dataTables_scrollHeadInner > TABLE,
DIV.dataTables_scrollFootInner > TABLE{
min-width: 100%;
}
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.