I want to customize the classes in Google Charts.
As far as I'm concerned, there are two options that I've stumbled upon. The first option is:
Just inspect the elements in the browser, to see what the name of the classes is, then just give them new rules in the css file. In some cases I've to set !important; to override the rule. This option seems very "ugly", because forcing the class to have an !important; state is just ugly.
.charts-menu-button,
.charts-menu-button-inner-box {
width: 200px;
line-height: 55px;
border: 0 !important;
padding: 0 !important;
}
This is my second option which I'm pretty confused over. As I read the Google Chart docs, they suggest to call the "cssClass", like this:
options: {
ui: {
cssClass: {}
}
}
What I don't understand is when I'm going with the second option, absolute nothing happens to the class I want to customize.
So my question is: What am I doing wrong here, and is there any other way?
Set the cssclassnames in options for the chart as below. Define the classes in the css file. Below example is for table chart.
chart1.options = {
// title: "User Chart",
displayExactValues: true,
'showRowNumber': false,
'allowHtml': true,
is3D: true,
// 'height' : '350px',
cssClassNames : {
headerRow :'tableChartHeaderRow',
hoverTableRow : 'tableChartHeaderRowHighlightedState'
}
};
Related
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
Is there any way to display the page-length option and paginate option in the same line? This is how I got:
Is there any way to override their css and display them in the same line? They both are in two separate div. I've added "jquery.dataTables.min.css" and "bootstrap.min.css".
Use dom option to construct the layout for Bootstrap framework.
var table = $('#example').DataTable({
dom: "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'l><'col-sm-8'p>>"
});
See this jsFiddle for code and demonstration
edit: Ah, I realized I can't reply to a comments in comment, I hope the OP can sees this.
simply add the character i for information
as example, if you want to have i after l, then put as below
var table = $('#example').DataTable({
dom: "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'li><'col-sm-8'p>>"
});
else you can even let i have it's own col-sm, as follows (note that I decreases pagination, p from 8 to 4 in order to fit into 12 division of 'row' by bootstrap standard.
var table = $('#example').DataTable({
dom: "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'l><'col-sm-4'i><'col-sm-4'p>>"
});
on bootstrap 4 I overide by
"language": {
"sProcessing": "กำลังดำเนินการ...",
"sLengthMenu": "แสดง_MENU_ แถว",
"sZeroRecords": "ไม่พบข้อมูล",
"sInfo": "แสดง START ถึง END จาก TOTAL แถว",
"sInfoEmpty": "แสดง 0 ถึง 0 จาก 0 แถว",
"sInfoFiltered": "(กรองข้อมูล MAX ทุกแถว)",
"sInfoPostFix": "",
"sSearch": "ค้นหา:",
"sUrl": "",
"oPaginate": {
"sFirst": "เิริ่มต้น",
"sPrevious": "ก่อนหน้า",
"sNext": "ถัดไป",
"sLast": "สุดท้าย"
}
},
Just override Datatable CSS class .dataTables_wrapper .dataTables_length by adding new property as per below.
.dataTables_wrapper .dataTables_length {
white-space: nowrap;
}
In my case i've tried to achieve length,info and paginate at the bottom of the table. You can see the result below.
To achieve this, first you should set dom property of your DataTable.
dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-3'l><'col-sm-3'i><'col-sm-6'p>>"
After that put and customize the code below for your own needs, in your CSS file or between the <style> tags.
div.dataTables_wrapper div.dataTables_info {
padding-top: 1.7em;
}
div.dataTables_wrapper div.dataTables_length {
padding-top: 0.3em;
}
This solved my problem. But in case you need to style other properties of datatable, you are free to use the selectors below.
div.dataTables_wrapper div.dataTables_filter {
padding-top: 0.8em;
}
div.dataTables_wrapper div.dataTables_paginate {
padding-top: 0.8em;
}
This should probably be pretty straighforward but I haven't been able to figure it out. I'm just trying to show a loadmask on a component without the spinner image. Everything else I want to look exactly the same.
I've set up a jsfiddle with a regular loadmask applied. Again, just trying to figure out how to exclude the spinner image.
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
height: 500,
width: 500,
autoShow: true,
title: 'Loadmask example',
html: 'adsfa',
listeners: {
boxready: function (win) {
var lm = new Ext.LoadMask(win, {
msg: 'loadmask msg'
});
lm.show();
}
}
});
});
jsfiddle
Add a custom css class to the LoadMask object. You need to override background of this class.
.custom-mask .x-mask-msg-text {
background: transparent !important;
padding: 5px !important
}
Demo
After extensive searching on this topic, I haven't been able to find an answer, so hopefully someone can help me with this issue. I have a relatively basic dialog box:
$("#dialog-search").dialog({
resizable: false,
height:dimensionData.height,
width: dimensionData.width,
modal: true,
title: dimensionData.title,
position: [x,y],
open: function() {
$("#dialog-search .dateField").blur();
},
close: function(event, ui){
callBack(event,ui);
}
});
What I want to do is replace the X icon (ui-icon-close) with a different icon provided by the ui (ui-icon-minus), so that clicking the minus icon closes the dialog instead. I've seen posts on how to hide the icon or replace it with a custom image in css, but I haven't yet found a way to replace the icon with another icon to perform the same functionality.
Edit: I also want to be able to use ui-icon-close for a different functionality in my dialog box by adding a custom behavior/location, but that may be outside the scope for this question. Feel free to address this if it's a related solution, though.
Try to see the structure of the dialog and it should not be hard to do it.
http://jqueryui.com/demos/dialog/#theming
Use the create event to change the class of the close button icon to class of another icon will do.
http://jsfiddle.net/Quincy/kHU2M/1/
$("#dialog-search").dialog({
create: function(event, ui) {
var widget = $(this).dialog("widget");
$(".ui-dialog-titlebar-close span", widget)
.removeClass("ui-icon-closethick")
.addClass("ui-icon-minusthick");
}
});
Old question, but maybe I'll help someone. Following CSS made the trick for me, totally custom Close button UI. Not very elegant :), but works fine for me.
.ui-icon-closethick {
background-image: url(images/my-10px-image.png) !important;
background-position: left top !important;
margin: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
width: 10px !important;
height: 10px !important;
}
.ui-dialog .ui-dialog-titlebar-close {
background: none !important;
border: none !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover {
padding: 0 !important;
}
My custom close button shown below:
jQuery UI themes are nice they apply to the entire document, however I have some cases where the style of the dialog such as the title bar colour must be changed.
In my jQuery UI css, the titlebar is coded:
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
Here's my javascript:
var $AlertDialog = $('<div"></div>')
.dialog({
autoOpen: false,
title: 'Alert Message',
buttons: {Ok: function() {$( this ).dialog( "close" );}}
});
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.css('ui-dialog-titlebar','color: red');
$AlertDialog.dialog('open');
};
Alerter() is then called as a substitute for alert().
Accessing and altering the color property of 'ui-dialog-titlebar' has no effect.
Lots of reading preceded this question. Seems others have had similar issues, but not specific to jQuery UI.
How can this be done?
Update:
Thanks to a good hint, I did this:
$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');
Works. But acceptable practice?
My suggestion would be to not use the .ui-dialog selector as there may be more than one dialog on a page. You can traverse to the title bar.
...
$AlertDialog.html(cTxt);
// might as well use the theme since its part of jquery ui
$AlertDialog.prev().addClass("ui-state-error");
$AlertDialog.dialog('open');
Firstly,
According to documentation .css() takes property as param.
It seems you are trying changing ui-dialog-titlebar. Instead try this:
...
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.dialog('open');
$(".ui-dialog .ui-dialog-title").css('color','red');
$(".ui-dialog .ui-dialog-title").css('background-color','orange');
//Assuming you want to change header color only
//see the theming structure at http://jqueryui.com/demos/dialog/#theming
};