I'm using qTip jquery-plugin for my tooltips.
I cannot change the font-size of the tooltips. This is the code.. any number 2..4..8 produces the same results.
$('.option img[title]').qtip({
style: { name: 'light', border: {width: 0}, title: { 'font-size': 2 } },
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomMiddle'
}
}
});
thanks
I solved with CSS:
.qtip-content {
font-size:12px;
}
You need to add the "px" and you can add any css property to your tool tip but you have to put it in quotation marks.
so try this (it worked for me)
'font-size' : '12px'
Try removing the quotes around font-size
style: { name: 'light', border: {width: 0}, title: { font-size: 2 } }
Related
I'm trying to replace the sweetalert control with the new sweetalert2 but I've run into some doubts. Among them, I was able to change the width of the popup but not the height. It seems that the "height" property does not take effect.
const { value: causas } = Swal.fire({
title: "Titulo",
text: "Este es el mensaje!",
input: 'select',
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmar!",
confirmButtonColor: "#DD6B55",
icon: 'warning',
cancelButtonText: "Cancelar!",
closeOnConfirm: true,
closeOnCancel: true,
width: 800,
height: 800,
inputOptions: {
'Causas': {
cause1: 'c1',
cause2: 'c2',
cause3: 'c3',
cause4: 'c4'
}
},
inputPlaceholder: 'Seleccione el item',
showCancelButton: true,
inputValidator: (value) => {
return new Promise((resolve) => {
//if (value === 'oranges') {
// resolve()
//} else {
// resolve('You need to select oranges :)')
//}
})
}
})
if (fruit) {
Swal.fire(`You selected: ${fruit}`)
}
I also want to change the font size but I haven't found how to do it. Maybe I should generate/create a css file? Can you help me? Thank you!!
I just fixed it! I added the properties in the css file.
.swal2-popup {
font-size: 14px !important;
}
.swal2-styled {
padding: 10px 32px 10px 32px !important;
margin: 20px 10px 0px 10px !important;
width: 170px;
height: 45px;
}
I am using c3.js graph library to plot the graph. I have a requirement to add superscript to the graph name / to the legend of the graphs.
I tried to add the HTML tags
Test<sub>abc</sub>
This is taking as string instead of tags. The tags are not getting rendered.
In the below code I need to change data1 as Data1⁴
Instead of "4" i may need to input different characters
var chart = c3.generate({
data: {
columns: [
['data1', 100],
['data2', 300],
['data3', 200]
],
type: 'pie'
},
legend: {
show: false
}
});```
In the above code I need to change data1 as Data1⁴
Instead of "4" i may need to input different characters
There should be a simple fix for this , but I am not able to find the solution. Since I will be getting dynamic characters I cannot copy the utf8 superscript characters.
Any help would be greatly appreciated.Thanks in advance.
There is a way to create your own legends. That is super quick and completely customizable.
Basically, add the legends for the first render with the required data.
Please check this Fiddle for working example.
onrendered: function() {
let chartData = this;
if(!d3.select('.chart-legend').node()) {
const legend = d3.select('#chart').insert('div', '.chart').attr('class', 'chart-legend');
legend.selectAll('span')
.data(['revenue', 'revenue1'])
.enter().append('span')
.attr('data-id', function (id) { return id; })
.attr('class', 'legend-item')
.html(function (id) { return "<span class=\"legend-label\">"+id+"<span><sup>45</sup>"; })
.each(function (id) {
d3.select(this).style('background-color', chartData.api.color(id));
})
.on('mouseover', function (id) {
chartData.api.focus(id);
})
.on('mouseout', function (id) {
chartData.api.revert();
})
.on('click', function (id) {
d3.select(this).classed("c3-legend-item-hidden", function() { return !this.classList.contains("c3-legend-item-hidden"); });
chartData.api.toggle(id);
});
}
}
// CSS
.legend-item {
display: inline-block;
width: 20%;
position: relative;
text-align: center;
cursor: pointer;
color: white;
height: 7px;
margin: 0 5px;
}
.legend-label {
color: black;
position: absolute;
top: 7px;
left: 20%;
}
Kendo Grid columns is given as below. After doing zoom screen column is getting hide, I want to do wrap column. Can we do it by giving some propery on gridColumns. Please tell me. I am not able to find it. Here 'Your Occupation Details' is getting hide. Here are some more fields, I have given only three here.
gridColumns: [
{
title: 'FirstName',
field: 'FirstName',
width: '0', hidden: true
},
{
title: 'FirstName',
field: 'FirstName',
width: '250px'
},
{
title: 'Your Occupation Details',
field: 'OccupationDetails',
width: '100',
}]
Use headerAttributes to wrap long column names in the JS columns declaration as follows;
columns: [
{
title: 'Your Occupation Details',
field: 'OccupationDetails',
width: '100',
headerAttributes: { style: "white-space: normal"}
},
...
]
Or for strongly typed grids you can use HeaderHtmlAttributes in Columns as well.
columns.Bound(p => p.OccupationDetails).HeaderHtmlAttributes(
new { style = "white-space: normal" }
);
Further documentation can be found in the Telerik's official forum Header Wrapping / Height and How to wrap kendo grid column
You can set CSS properties of the Grid to enable column wrap.
.k-grid-header .k-header {
overflow: visible;
white-space: normal;
}
Take a look at this documentation for setting column header attributes.
http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.headerAttributes
This worked for me
.k-grid .k-grid-header .k-header .k-link {
height: auto;
}
and this
.k-grid .k-grid-header .k-header {
white-space: normal;
}
source: http://www.telerik.com/forums/header-wrapping-height
To wrap the header:
.k-grid .k-grid-header .k-header .k-link { height: auto; }
.k-grid .k-grid-header .k-header { white-space: normal; }
To wrap the rows:
td[role="gridcell"] { white-space: nowrap; }
<style>
.k-grid .k-grid-header .k-header .k-link {
overflow: visible !important; white-space: normal !important;
}
</style>
You can add this to your custom CSS if you need to the warp text of the column header of a specific grid. This worked for me.
#yourgrid .k-grid-header .k-header .k-link {
white-space: normal !important;
}
You can do it as:
k-grid .k-grid-header .k-header .k-link {
height: auto;
word-break:break-all !important;
word-wrap:break-word !important;
}
.k-grid .k-grid-header .k-header {
white-space: normal;
}
Works Perfect for me.
Add the following css to you code, it will be applied to all grid columns and you won't need to add style attribute to individual grid column.
<style>
.k-grid td {
word-break: break-all !important;
word-wrap: break-word !important;
}
</style>
I am trying to show a KendoUI Chart inside a DIV and looks what the LOG says:
Invalid negative value for attribute width="-10px"
This is the code:
<div id="chart"></div>
This is the javascript:
$("#chart").kendoChart({
theme: "Metro",
legend: {
position: "right",
labels: {
font: "12px arial",
color: "white"
},
},
chartArea: {
background: "",
},
dataSource: data,
series: [
{
type: "pie",
field: "itemTotal",
categoryField: "itemNameAndTotal",
explodeField: "exploded"
}
],
tooltip: {
visible: true,
template: "${ category }"
}
});
This is the css:
#chart {
background: #f9a600;
border-radius: 5px;
margin: 10px 5px 5px 5px;
padding: 5px;
}
Thanks for the help!
I'm using jqPlot
Look at the right-bottom corner
Left side is correct, but the right side isn't.
There is a way to fix word-wrap on tick labels?
EDIT:
$(document).ready(function(){
var plot2 = $.jqplot ('chart-line', [[["2013-03-22",1],["2013-03-23",0],["2013-03-24",0],["2013-03-25",2],["2013-03-26",19],["2013-03-27",7],["2013-03-28",4]]]
, {
title: 'Total de alertas por dia',
seriesDefaults: {
fill:true,
color: 'steelblue',
rendererOptions: {
smooth: true
},
pointLabels:{ show:true }
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{
formatString: '%F',//'%Q',
textColor: 'black',
fontSize: '11px',
labelPosition: 'auto'
}
},
yaxis: {
min:0,
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
}
});
EDIT:
Here is HTML
<style>
.ComBordaRedonda {
border:1px solid #dadada;
border-radius:3px;
padding:5px;
font-size: 10pt;
font-family: Calibri;
}
</style>
<div class="ComBordaRedonda" style = "float: right;background-color:#FFFFFF;width: 57%; height: 300px;">
<div id = "chart-line" style = "width: 90%; height: 95%;margin:auto">
</div>
</div>
I fixed it.
I forgot to include the css of jqPlot in the page.
thanks nick_w!