I have the following in my code. Having the option
legend: {show:true}
messes up the chart badly. The legend section is so long
and there is no chart.
I have pasted the image here of how the chart looks :
http://tinypic.com/view.php?pic=2eqgbgy&s=7
It shows fine without the legend option though, but chart is of course without the legend.
In Chrome I see the following exception
Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
<script type="text/javascript">
line2 = [['Living Expenses',1000], ['Loans',2000], ['Credit
Card',500]];
$j(document).ready(function() {
$j.jqplot.config.enablePlugins = true;
$j.jqplot('piechartdiv', [line2], {
title: 'Where is my money going?',
seriesDefaults:{renderer:$j.jqplot.PieRenderer,
rendererOptions:{sliceMargin:8}}, legend:{show:true}
});
});
</script>
<div style="width: 450px;margin: 0px auto;">
<div id='piechartdiv'></div>
</div>
Any help appreciated.
Are you using Bootstrap or some other CSS reset library?
If you go into firebug, and select the <table class="jqplot-table-legend" ...> element, you'll probably see that there is a width:100% default property set the table elements. You can fix it in your CSS layout:
#piechartdiv table.jqplot-table-legend {
width:auto;
}
The only thing that seems weird to me is this:
$j.jqplot
Why are there some J's on your code?, besides that, everything seems to be fine, maybe try putting a location on the legend to see if that fix the issue, here is an example:
plot = $.jqplot('chart2', [arr], {
grid: {
drawBorder: true,
drawGridlines: false,
background: '#FFFFFF',
shadow: true
},
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: {
show: true,
location: 'e'
}
});
Have you included the jqplot.css file in your code.
Make sure that it is included in the code, and that the file is also present in the directory you are referring to.
Thank you
I came across something similar.
try checking css property text-align:left
<div id='piechartdiv' style="text-align:left;"></div>
I'm afraid I don't know why but these fixed the error for me
Related
I want to change the background color of my data table as a whole. I don't want to use the dark themed or light themed. I can't seem to change it even when using !important or using available classes.
Just add the relevant color class e.g. class="primary" or the name of the color from the vuetify color pack.
<v-data-table class="elevation-1 primary"></v-data-table>
Add a custom class to v-data-table tag like this:
<v-data-table ... class="elevation-1 test" ...>
elevation-1 is their standard class name. I added test to illustrate the point.
Add necessary styling to .test .theme--light.v-table selector in your custom CSS.
E.g. .test .theme--light.v-table { background-color: #00f; }
You may need to replace the theme name in the CSS path with your theme name.
If you look inside the DOM, you'll notice that class name test was applied to a <div> container, not the <table> element.
A simple way to include your CSS is with <style> tag inside your App.vue file:
<style>
#import './assets/styles/yourstyles.css';
</style>
How to include css files in Vue 2 has more on that.
You can use headers object to specify class as below,
headers: [{
text: 'Dessert (100g serving)',
align: 'start',
divider: true,
sortable: false,
value: 'name',
class: "blue lighten-5"
},
{
text: 'Calories',
value: 'calories',
align: 'center',
divider: true,
class: "blue lighten-5"
}]
The above code will add light blue background to your header. You can do more with the class attr in headers object
The current answers weren't working for my but I found a simple solution. I'll share it just in case anyone sees this in the future.
# 1. Add a class to the table element
<v-simple-table class="table">
...
</v-simple-table>
# 2. Add background color
<style scoped>
.table {
background-color: red;
}
</style>
I'm currently trying to save a PDF for a web application with many pages. I call the partial views into one main page and use KendoUI to save the DOM into the PDF. Because some of these pages are very long and are variant depending on user input, I need the data to display over multiple pages. Whenever forcePageBreak is not called, KendoUI naturally does this by displaying all the data over multiple pages. Although when I turn on forcePageBreak and set page breaks at the beginning of each Partial in the main page, each Partial will only display one page in the pdf, and the rest of the data is cut off.
Here is an example of the main page's code:
<div class="myCanvas" id="myCanvas">
<div class="page-break">#{Html.RenderPartial("_Page1", Model._VM_Page1);}</div>
<div class="page-break">#{Html.RenderPartial("_Page2", Model._VM_Page2);}</div>
<div class="page-break">#{Html.RenderPartial("_Page3", Model._VM_Page3);}</div>
<div class="page-break">#{Html.RenderPartial("_Page4", Model._VM_Page4);}</div>
<div class="page-break">#{Html.RenderPartial("_Page5", Model._VM_Page5);}</div>
<div class="page-break">#{Html.RenderPartial("_Page6", Model._VM_Page6);}</div>
</div>
<script>
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-break",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
I've tried putting page breaks within the beginning of each partial, to no avail. I've looked into trying to set groups, but I'm not exactly sure I understand if that will solve my problem. And CSS page-break-before: always isn't working. I'm unsure what to do.
The answer seems to be dive deeper for the lowest possible class that can have a page break before.
I generally solved this issue by putting the page breaks on the header classes within each Partial View. For example:
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-header",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
Where the logic of my code would be similar to:
<div class="main">
<div class="page-header>
Header
</div>
<div class="ContentContainer">
Content
</div>
</div>
It was weird because I had set the page breaks at the global level where the partials were being called and also at the local level where main was being called, but I needed to dive even deeper to the page-header items to get it to work.
Here is my example working properly
Step 1: All CDNs
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
Step 2: Add div to data div which you have created
<div data-uid="#= uid #" class="#= (id%10 == 0 ? 'page-break' : '') #">
</div>
Step 3: JS code
kendo.drawing.drawDOM("#downloadPDF", {
paperSize: "A4",
margin: {
left: "1cm",
top: "1cm",
right: "1cm",
bottom: "1cm"
},
scale: 0.8,
forcePageBreak: ".page-break"
})
.then(function(group) {
kendo.drawing.pdf.saveAs(group, "plagiarism.pdf")
});
So I've been trying to apply the plugin to the Body Element and for some reason it just doesn't work..
Things I've tried:
$(function() {
$('body, html').slimScroll({
size: '8px',
width: '100%',
height: '100%',
color: '#ff4800',
allowPageScroll: true,
alwaysVisible: true
});
});
$(function() {
$('#body').slimScroll({
size: '8px',
width: '100%',
height: '100%',
color: '#ff4800',
allowPageScroll: true,
alwaysVisible: true
});
});
Does anyone know what Im doing wrong ?
Thanks in advance for answering
"What If I dont have control of the body tag ? and Im embed a template into a 3rd party site? so the body has no id tag it only has view-source:avatars.imvu.com/LadyKonstantine"
Since you need to apply slim scroll on body you have to use the body selector for jQuery. The code will be like this :
<script type="text/javascript">
$(function(){
$("body").slimScroll({
size: '8px',
width: '100%',
height: '100%',
color: '#ff4800',
allowPageScroll: true,
alwaysVisible: true
});
});
</script>
Remember these
Make sure you have installed both jQuery and slimScroll plugin.
Scroll will be visible if your body have height above 100%
If you would like to use $("#body") instead of $("body") don't forget to add
<body id="body">
More Details
Click here! to read more about slim scroll.
Attaching slimScroll directly to Body tag is not a preffered solution in my view. Try it and you will find the slimScroll wraps your BODY tag inside it's own DIV tag; at least I found it that way when I attempted to attached slimScroll to the BODY element. As a result, you will find the HTML of your page is a complete mess. The sequence of tags will be HEAD - slimScrollDiv - BODY. Instead, I suggest to have a wrapper DIV inside BODY immediately after you open BODY tag and then attach slimScroll to this wrapper DIV.
SlimScroll only works on div element. To achieve this, add a main wrapper just after the opening body tag. In this case I will call it:
In the HTML:
<div id="body"></div>
Then calculate the viewport height, not the HTML, document height. Once done, pass this value to the height of the slimscroll plugin. Example:
In the JS:
var viewportHeight= $(window).height();
$('#body').slimScroll({
height: viewportHeight+'px',
color: '#455A64',
distance: '0',
allowPageScroll: true,
alwaysVisible: true
});
You can also use the new CSS value of vh to compute the height of slimscroll. Example:
$('#body').slimScroll({
height: '100vh',
color: '#455A64',
distance: '0',
allowPageScroll: true,
alwaysVisible: true
});
I'd like remove the header controls from the top of the Kendo UI Scheduler control, i.e. the part outlined in red from this screenshot:
I just want to show one static Day view for a single day. Any ideas?
for all Day Slot hide
$("#scheduler").kendoScheduler({
allDaySlot: false,
});
for Toolbar hide:
<style>
.k-scheduler-toolbar {
border-width: 0 0 1px;
display: none;
}
</style>
I'm not sure how to remove all of that, but you can at least remove the All Day slot by selecting allDaySlot: false in the views collection. If you only want to show the "day" view, you would use something like this (also showing how to remove footer; same doesn't appear to work for header, though):
$("#scheduler").kendoScheduler({
views: [
{ type: "day", selected: true, allDaySlot: false}
],
footer: false // removes the footer
});
Please check the information below:
To remove the footer you can set the footer option to false
The toolbar can be removed using CSS styles:
.k-scheduler-toolbar {
display: none;
}
All-day slot can be removed using the allDaySlot
jqGrid is created in web page. If page width is decreased, rightmost columns are no more accessible.
How to add horizontal scrollbar to jqGrid so that if page width is small, jqGrid can scrolled
horizontally to allow access to all columns ?
grid.jqGrid({
url: '<%= ResolveUrl("~/Grid/GetData?_entity=Strings")%>',
datatype: "json",
mtype: 'POST',
scroll: 1,
autoencode: true,
height: 350,
autowidth: true,
You can try a similar approach but in this case you'll make use of the grid's scrollbars instead of the div overflow.
The idea is to resize the grid itself causing it to show scrollbars if its bouderies are smaller than its content. For this to work correctly the columns must have the option fixed:true otherwise they will resize themselfs to fit the grid's width.
Declare the DOM as follows:
<div id="grid1container" style="width: 100%;">
<table id="grid1"></table>
<div id="grid1pager"></div>
</div>
Then add the javascrip code to the page:
$(window).resize(function () { ResizeGrid1() });
function ResizeGrid1() {
$('#grid1container').height($(window).height() - 55);
$('#grid1').jqGrid()
.setGridWidth($('#grid1container').width() - 2)
.setGridHeight($('#grid1container').height());
}
Here I'm manipulating the grid's height too, if you don't want it just remove the setGridHeight line.
I've found this solution but its not perfec as in FF4 the window stops reporting width resize bellow 535px... couldn't figure out why.
My idea was to wrap the grid inside a DIV and set it to overflow: auto; width: 100%
<div id="grid1container" style="width: 100%; overflow: auto;">
<table id="grid1"></table>
<div id="grid1pager"></div>
</div>