How do I customize the margin value
The default margins for mr mt ml mb is 1em，How can I set these margins to use 18px or 20px? I'd also like to do something similar with padding.
my: margin : 20px 0
mx: margin : 0 20px
ml : margin-left: 20px
mt: margin-top: 20px
You can do that by customizing your theme.
You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.
module.exports = {
theme: {
extend: {
spacing: {
'20px': '20px',
}
}
}
}
Alternatively, you can customize just the margin scale by editing theme.margin or theme.extend.margin in your tailwind.config.js file.
module.exports = {
theme: {
extend: {
margin: {
'18px': '18px',
}
}
}
}
Also, if you don't want to modify your theme, you can use arbitrary values for the utility classes, such as m-[20px] or my-[18px].
Resource: https://tailwindcss.com/docs/margin#customizing-your-theme
Related
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; }
How to make a specific introjs tooltip width longer? I'm able to change the text color using css but changing the width is not working.
CSS:
.customTooltip * {
color: #4a4a4a;
font-size: 18px;
}
.customTooltip .introjs-tooltip-title {
color: #0a41c9;
}
//Not working
.customTooltip .introjs-tooltip {
min-width: 500px;
}
IntroJs:
const intro = introJs();
intro.setOptions({
steps: [{
title: 'Title',
intro: 'Long Intro',
tooltipClass: 'customTooltip'
}
]
})
did you want to resize the parent div?
you can try
.customTooltip {
min-width: 500px;
}
directly, and your can add !important too.
I am using ngx-gallery to display an image gallery. Although I set the display image arrow property to be true, I can't see the arrows in the image.
I am using Angular 7. This is my gallery.ts file code:
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
ngOnInit(): void {
this.galleryOptions = [
{
'previewCloseOnEsc': true,
'previewKeyboardNavigation': true,
'imageBullets': true,
'imageAutoPlay': true,
width: '100%',
height: '400px',
thumbnailsColumns: 4,
imageAnimation: NgxGalleryAnimation.Slide
},
// max-width 800
{
breakpoint: 800,
width: '100%',
height: '600px',
imagePercent: 90,
thumbnailsPercent: 10,
thumbnailsMargin: 20,
thumbnailMargin: 20
},
// max-width 400
{
breakpoint: 400,
preview: false
}
];
this.galleryImages = [
{
small: 'assets/1-small.png',
medium: 'assets/1-medium.png',
big: 'assets/1-big.png'
},
{
small: 'assets/2-small.png',
medium: 'assets/2-medium.png',
big: 'assets/2-big.png'
},
{
small: 'assets/3-small.png',
medium: 'assets/3-medium.png',
big: 'assets/3-big.png'
},
{
small: 'assets/4-small.png',
medium: 'assets/4-medium.png',
big: 'assets/4-big.png'
}
];
}
I have also changed the css as described in some forum:
ngx-gallery /deep/ ngx-gallery-image .ngx-gallery-arrow {
background-color: orangered;
}
ngx-gallery /deep/ ngx-gallery-thumbnails .ngx-gallery-arrow {
background-color: orangered;
}
ngx-gallery /deep/ ngx-gallery-preview .ngx-gallery-arrow {
background-color: orangered;
}
This is my gallery.html code
<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
ngx-gallery needs font awesome to display left-right arrow icon. Try including them in your angular-cli.json file. according to their documentation you can include them like this
"styles": [
...
"../node_modules/font-awesome/css/font-awesome.css"
]
You can also include font-awesome.css directly in your index.html file.
Also include hammer.js for swipe. import in your module like this
npm install hammerjs --save
import 'hammerjs';
you may also need bootstrap to use ngx-gallery properly.
i solved using
#import url(../node_modules/font-awesome/css/font-awesome.css);
in "styles.css"
i am working in extjs4. i have view with ganttChart. I want to change color of splitter line which is between treecolumn and gantt. i am creating gantt as=
var gantt = Ext.create("Gnt.panel.Gantt", {
itemId :'project-list-gantt-chart',
cls : 'projectlistganttchart',
enableTaskDragDrop: false,
columnLines :true,
lockedGridConfig :{
split: false
},
viewPreset : 'customPreset',
columns : [{
xtype : 'treecolumn',
sortable: true,
dataIndex: 'Name',
}],
And i am including this gantt in my following form panel=
Ext.define('GanttChart' ,{
extend: 'Ext.form.Panel',
border: false,
})
By using panel's add method i am including it as-
afterrender : function(){
var me = this;
me.add(gantt);
}
So for changing color, i change css as-
.x-panel-default{
border-color: red;
padding: 0;
}
But its changing color of all panels within my project. So how to override this css so that it will change color of only gantt.
Use the ui cfg param for that:
// add this config line to your panel that host the gantt
ui: 'gantt'
and add this css
.x-panel-gantt{
border-color: red;
padding: 0;
}
Note that the ui is meant for exactly such things.
You might want to refer to this fiddle. Note that it may miss some css classes but I guess it should show you the trick. And please note that you will need to set the border in a correct way because based on the theme the border might be 0px. That is also done in the example. In addition here is the demo code:
Javascript
Ext.create('Ext.panel.Panel', {
title: 'test',
height: 200,
width: 200,
ui: 'custom',
renderTo: Ext.getBody()
})
CSS (just copied from developer tools)
.x-panel-body-custom {
color: black;
font-size: 13px;
font-size: normal;
}
.x-panel-custom{
border: 1px solid red;
padding: 0;
}
.x-panel-body-custom {
background: white;
border-color: #157fcc;
color: black;
font-size: 13px;
font-size: normal;
border-width: 1px;
border-style: solid;
}
.x-panel-header-custom {
background-image: none;
background-color: #157fcc;
}
.x-panel-header-custom-horizontal-noborder {
padding: 10px 10px 10px 10px;
}
.x-panel-header-custom-horizontal {
padding: 9px 9px 10px 9px;
}
You can use id of the component(panel) itself or any top level id of the component in which the panel is rendered like
#toplevelid .x-panel-default{
border-color: red;
padding: 0;
}
You should be able to get your gantt item and change the css class of it using something like:
var ganttItem = Ext.getCmp('your item id');
ganttItem.addCls('your css class for specifc color');
I haven't tested this but you can get the idea.
If you want to reset the css class for the item use .setCls() to set it up from scratch.