I am using chart.js to show a line chart in an Angular component. The code does not have any padding or margins added for the chart. I added styling to set the padding and margin to zero both in the create the chart in the .ts file and in the style sheets and nothing makes any difference. When I inspect the element in Chrome developer mode it does not show any padding or margins, so I think the styling is internal to chart.js. Below is a screenshot with the chart element highlighted in Chrome developer mode.
As you can see, there is a margin or border on the left, bottom and right of the chart canvas element, but strangely not at the top. The spacing between the Y-Axis labels and the left of the chart are especially bad when viewed on a mobile phone so I really need to remove it. I have spent hours setting every element I can think of to have 0 padding and 0 margins and trying different changes to the code and style sheets and searching through other articles on the Internet including Stackoverflow but none of them seem to answer this specific question.
I also tried adding box-sizing:border-box; to the div container containing the chart but it did not make any difference, i.e. as suggested in this article:
Why is chart.js canvas not respecting the padding of the container element?
Here is my chart configuration:
this.myChart = new Chart("chartCanvas", {
type: 'line',
data: {
labels: labelVars,
datasets: datasets
},
options: {
elements: {
point: {
radius: 0
},
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index',
intersect: false,
enabled: width > 640
},
hover: {
mode: 'nearest',
intersect: true
},
legend: {
display: false,
position: 'bottom',
labels: {
}
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'week',
tooltipFormat: 'MM/DD/YYYY'
},
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
autoSkip: true,
padding: 0,
maxTicksLimit: this.getTickLimit(),
maxRotation: this.getRotation(),
minRotation: this.getRotation()
},
gridLines: {
display: false,
offsetGridLines: true
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
maxTicksLimit: 6,
beginAtZero: false
}
}]
}
}
});
Here is the current html:
<div class="chartContainer">
<canvas *ngIf="displayChart" id="chartCanvas"></canvas>
</div>
And here is the current css:
#chartCanvas {
padding-left: 0;
margin-left: 0;
}
.chartContainer {
height: 500px;
margin: 0;
padding: 0;
align-items: left;
align-self: left;
align-content: left;
}
Has anyone else encountered this problem?
I found the problem. I had the scaleLabel turned on but was not showing a scale label, which was adding extra space. I changed scaleLabel display to false as shown below and the space went away:
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: ''
},
Depending on your chartjs config, you just have to set the padding of the chart.js config.
Info: Offset's in the canvas cannot be altered with css, since the chart is "drawn" on it.
(details: in the documentation)
For a example:
const config = {
type: 'line',
data: data,
options: {
...
plugins: {
....
},
scales:{
x: {
ticks:{ padding:0 }
}
},
}
};
I want to set A4 size (210 x 297 mm) in Tailwind. I guess what I'm looking for is something like below
theme: {
extend: {
spacing: {
width: {
a4: "210mm",
},
height: {
a4: "297mm"
}
},
},
<div class="w-a4 h-a4">
</div>
Spacing is kinda a group of sizes
By default the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins.
So when you're register spacing like
theme: {
extend: {
spacing: {
a4: '210mm',
},
},
You will be able to use p-a4, m-a4, h-a4, w-a4 etc. All of them will have size of 210mm
If you wish to split sizes, no need in spacing key - just pass width and height
theme: {
extend: {
width: {
a4: '210mm',
},
height: {
a4: '297mm',
},
},
Per docs You should have been written like this:
spacing: {
width: {
'a4': "210mm",
},
height: {
'a4': "297mm"
}
},
Or using Arbitrary values If you don't want to extend.
If your using vscode install Tailwind CSS IntelliSense for autocompleting.
custom size（number）
custom is usually in .w-{number} and .w-px two type ，at number In terms of what rem do Relative unit，px Is the absolute unit of pixels 。In rem, each unit is 0.25rem, or 1/4 of a font size.
like this the classname like w-1
<div class="w-1"></div>
.w-1 { width: 1rem; }
I am trying to use the Ext.ux.form.ItemSelector,but no icons are on the add/remove/top/down buttons!
Code below:
Ext.create('Ext.ux.form.ItemSelector', {
renderTo: Ext.getBody(),
name: 'channelRange',
store: Ext.create('Ext.data.Store', {
fields: ['display', 'value'],
data: [{
display: '22',
value: 2
}, {
display: '33',
value: 3
}]
}),
buttons: ['add', 'remove'],//No icons on the buttons! Why?
//imagePath: '../ux/images/',
displayField: 'display',
valueField: 'value',
value : [ 3 ],
allowBlank: false
});
See the result here, the buttons between the 2 multiselect have no icon!
Yes it is an issue with ItemSelector. You will not see any icon on buttons after any kind of BUILD.
I was able to resolve this issue permanently via overriding below CSS. Actually if you debug the code you will see that it is trying to location these button icons on different location.
// Do these overrides in any of your CSS file.
.x-form-itemselector-top {
background-image: url(images/itemselector/top.gif) !important;
}
.x-form-itemselector-up {
background-image: url(images/itemselector/up.gif) !important;
}
.x-form-itemselector-add {
background-image: url(images/itemselector/right.gif) !important;
}
.x-form-itemselector-remove {
background-image: url(images/itemselector/left.gif) !important;
}
.x-form-itemselector-down {
background-image: url(images/itemselector/down.gif) !important;
}
.x-form-itemselector-bottom {
background-image: url(images/itemselector/bottom.gif) !important;
}
NOTE: Also make a sure you have these icons on given path (images/itemselector/). In my case I copied these icons from "ui-client\ext\packages\ux\classic\resources\images\itemselector" to "ui-client\resources\images\itemselector". Here "ui-client" is my application root folder.
Hope above provided information will help.
Solution from my project:
grid.tbar.push({
itemId : 'create',
iconCls : 'iconAdd',
text : 'Add'
}
and config in some .css file:
.iconAdd {background: url(/resources/img/action-add.png) no-repeat !important;}
Is there a way to give user possibility to easily changing line-height attribute of paragraph in tinyMCE editor? Something like its native "Font size" or "Format" <select> or anything else. I know I can use "edit CSS" functionality and set it up there. I'm looking for something more user-friendly.
I can't find it anywhere.
I found this PlugIn for TinyMCE version 4.1.5 (2014-09-09)
https://github.com/castler/tinymce-line-height-plugin
Setting up like this:
tinymce.init({
plugins: 'lineheight',
toolbar: 'lineheightselect'
});
Also you could configure the different heights like that:
tinymce.init({
lineheight_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 36pt",
});
I tested this and it works great.
As per my comment,
Someone else was experiencing an issue similar to yours and a member of the TinyMCE forums provided a solution:
http://www.tinymce.com/forum/viewtopic.php?id=28774
With TinyMCE 4 you can use "style_formats" option
http://www.tinymce.com/wiki.php/Configuration:style_formats
I have found a good way for adding custom line-height to tinymce but this is a trick.
I am using tinymce v5 and with these codes i can use line height with a nice select option.
you have to add these lines to init codes of tiny mce:
tinymce.init({
selector: 'textarea',
height: 500,
plugins: 'table wordcount',
toolbar: ' styleselect ',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
],
toolbar: 'styleselect'
content_style: '.lineheight20px { line-height: 20px; }' +
'.lineheight22px { line-height: 22px; }' +
'.lineheight24px { line-height: 24px; }' +
'.lineheight26px { line-height: 26px; }' +
'.lineheight28px { line-height: 28px; }' +
'.lineheight30px { line-height: 30px; }' +
'.lineheight32px { line-height: 32px; }' +
'.lineheight34px { line-height: 34px; }' +
'.lineheight36px { line-height: 36px; }' +
'.lineheight38px { line-height: 38px; }' +
'.lineheight40px { line-height: 40px; }' +
'.tablerow1 { background-color: #D3D3D3; }',
formats: {
lineheight20px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight20px' },
lineheight22px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight22px' },
lineheight24px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight24px' },
lineheight26px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight26px' },
lineheight28px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight20px' },
lineheight30px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight30px' },
lineheight32px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight32px' },
lineheight34px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight34px' },
lineheight36px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight36px' },
lineheight38px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight38px' },
lineheight40px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight40px' }
},
style_formats: [
{ title: 'lineheight20px',format: 'lineheight20px' },
{ title: 'lineheight22px', format: 'lineheight22px' },
{ title: 'lineheight24px', format: 'lineheight24px' },
{ title: 'lineheight26px', format: 'lineheight26px' },
{ title: 'lineheight28px', format: 'lineheight28px' },
{ title: 'lineheight30px', format: 'lineheight30px' },
{ title: 'lineheight32px', format: 'lineheight32px' },
{ title: 'lineheight34px', format: 'lineheight34px' },
{ title: 'lineheight36px', format: 'lineheight36px' },
{ title: 'lineheight38px', format: 'lineheight38px' },
{ title: 'lineheight40px', format: 'lineheight40px' }
]
});
and at the end i have to say you need to find a "paragraph" word in the file of tinymce/themes/silver/theme.min.js and change it to "line-height" if you want to see the line-height name instead of paragraph name.
this word is in line of 290855 of that file.
and this job is called custom format in tinymce that if you want to find it check this link:
https://www.tiny.cloud/docs/demo/format-custom/
and I have to say you need to add this css codes to your css file:
.lineheight22px{
line-height: 22px;
}
.lineheight24px{
line-height: 24px;
}
.lineheight26px{
line-height: 26px;
}
.lineheight28px{
line-height: 28px;
}
.lineheight30px{
line-height: 30px;
}
.lineheight32px{
line-height: 32px;
}
.lineheight34px{
line-height: 34px;
}
.lineheight36px{
line-height: 36px;
}
.lineheight38px{
line-height: 38px;
}
.lineheight40px{
line-height: 40px;
}
Indeed, TinyMCE doesn't have line-height control as it has for font names or font sizes, but you can easily add it with the style_formats. I used this config:
// custom formatting is under Format > formats, so make sure it's in your menu (it is, by default)
const editorOptions = {
// Notice that it overrides Format > formats
style_formats: [
{
title: 'Line height',
items: [
{
title: 'Default',
inline: 'span',
// `inline-block` because CSS `line-height` doesn't affect multiline `span`
styles: { 'line-height': 'normal', display: 'inline-block' }
},
{
title: '40px',
inline: 'span',
styles: { 'line-height': '40px', display: 'inline-block' }
},
// add as more as you need
]
},
// ...
]
}
Working example on codepen
TinyMCE style_formats doc