I have my css like this:
.ui-widget-header#shuttleList {
background: linear-gradient(120deg, white 180px, #d3d3d3 180px, #d3d3d3 250px, #f2f2f2 250px);
-pie-background: linear-gradient(120deg, white 180px, #d3d3d3 180px, #d3d3d3 250px, #f2f2f2 250px);
behavior: url(/scripts/core/pie/PIE.htc);
}
It works very fine in IE9.
Now I have to use this dynamicly in jquery, like this:
if (contentBox[0].id.indexOf('shuttle') >= 0)
{
contentHeader.css('background', 'linear-gradient(120deg, white 180px, #d3d3d3 180px, #d3d3d3 250px, #f2f2f2 250px);');
contentHeader.css('-pie-background', 'linear-gradient(120deg, white 180px, #d3d3d3 180px, #d3d3d3 250px, #f2f2f2 250px);');
contentHeader.find('li').css('display', 'block');
}
It works for IE10 and IE11, so I assume the jquery command itself works well - but not the pie-background. Maybe the pie (it's just javascript, isnt it?) doesnt get the actual information, e.g. no event is fired?
Any ideas?
jQuery's .css('x') method sets element.style.x behind the scenes; if you were doing that directly then you'd have to use element.style.PieBackground='...' so try formatting the property name that way here too:
contentHeader.css('PieBackground', '...')
Related
i want to customize the color of md-switch without writing alot of angular/js if possible
here how i want it
i was able to get the first , mainly becuse the main theme is solid gren and i used this to make the body of the switch light green
<md-switch ng-change="$ctrl.updateAsset($ctrl.asset,
'disabled')" ng-model="$ctrl.asset.disabled"></md-switch>
md-switch.md-checked .md-bar {
background-color: rgb(212, 255, 186); //light green
}
how would i change the head color (round)? how would i change the color of both head and body of the switch when the switch is off?
What you call the "head" is an element with class md-thumb; the bar, as you note, has class md-bar. Both are colored by their background-color property.
The md-checked class is active when the switch is "on".
md-switch .md-thumb {
background-color: darkgrey;
}
md-switch .md-bar {
background-color: lightgray;
}
md-switch.md-checked .md-thumb {
background-color: darkgreen;
}
md-switch.md-checked .md-bar {
background-color: lightgreen'
}
Obviously you should use the exact colors you want.
You could simplify the above if you're using SASS or LESS, and you may want to look at custom theming if you're planning to change more than this one component.
Edited to add:
To reverse the direction, use the transform property, e.g.
md-switch .md-thumb-container {
transform: translate3d(100%, 0, 0);
}
md-switch.md-checked .md-thumb-container {
transform: translate3d(0, 0, 0);
}
Add vendor prefixes as necessary for your browser support requirements.
I have a lot of data in the tooltip of a highcharts bar chart. Each tooltip data has some 50-60 lines and the complete tooltip is not being able to be displayed in the graph container. In order to view all of it, i want a scroll bar in tooltip. Is it possible?
Here is an example of the code.
Working jsFiddle example
Here is the tooltip code. I don't know where to add the scroll bar code.
tooltip: {
useHTML: true,
pointFormatter: function() {
var string = '';
Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
string += p + '</a><br>'
})
return "Incident<br>" + string + "<br />";
}
}
Just add the following CSS:
.highcharts-tooltip>span {
max-height:100px;
overflow-y: auto;
}
However,there would be a problem regarding the auto-closing of the tooltips. You might have to tweak the events of the highchart.
.highcharts-tooltip {
pointer-events: auto !important;
}
.highcharts-tooltip > span {
max-height: 200px;
overflow-y: auto;
}
set overflow-y and pointer-events can scroll On PC. But on mobile, click tooltip will change.
I am using https://github.com/n3-charts/line-chart library to generate charts. Is it possible to change font size of axis labels? I could not find such option in official documentation.
Something like this on the CSS would work
.tick text {
font-size: 120%;
}
Edit: The appearance of many SVG elements can be configured using CSS, just inspect them in the browser and try modifying them.
When the chart is generated it has it's own classes that you can take advantage of overwriting... Here are all the axis for example:
// X-Axis Font
.x-axis {
font-size: 120%;
}
// Left Y-Axis
.y-axis {
font-size: 130%;
}
// Right Y-Axis
.y2-axis {
font-size: 140%;
}
Hope that helps.
I've desperately been trying to change the label text color on the charts I'm drawing with nvd3.js - they're drawn in black, but I need them white due to the color of the page they are included on.
I'm using nvd3.js version 1.1.15BETA with d3.js version 3.3.13, integrated into my AngularJS app via the angularjs-nvd3-directives version 0.0.7.
Does anyone have any suggestions on what to do to accomplish this?
Thanks.
Changing the text color in your chart, try this :
svg text {
fill: white;
}
To change the label color in the pie chart
.nvd3.nv-pie .nv-slice text {
fill: white !important;
}
Here is a working fiddle.
Hope it helps
Hope it helps:
in your controller:
$scope.callbackFunction = function(){
return function(){
d3.selectAll('.nv-pieLabels text').style('fill', "white");
}
}
In your HTML (the only important thing is callback=callbackFunction()):
<nvd3-pie-chart
data="exampleData"
id="exampleId"
color="colorFunction()"
width="1100"
height="700"
x="xFunction()"
y="yFunction()"
rotateLabels="120"
showLabels="true"
callback="callbackFunction()">
<svg></svg>
</nvd3-pie-chart>
Credits to:
https://github.com/cmaurer/angularjs-nvd3-directives/blob/master/examples/nvd3.callback.html
&
https://github.com/krispo/angular-nvd3/issues/8
I'm having an issue with boostrap3 and it's default background: transparent !important; print setting.
I have the need to show a heatmap in my webapp and have these printable.
I'm using an ng-style directive for that to dynamically calculate the needed background-color.
In short, this is the html part
<div class="heatmap" ng-style="scalecolor(10)">lorem ipsum</div>
and this is the controller part
$scope.scalecolor = function(perc) {
return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) }
};
However, because bootstrap3 sets all backgrounds to transparent with the !important keyword, I can't print these.
This is the part of bootstrap 3.1.0 css causing the issue with missing background-color:
#media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
}
}
Since the inverse of background: transparent !important; is background: color hex code !important;
(see here )
I'm trying to set that using the ng-style, but then the exclamantion mark causes Angularjs to flip when I try this:
$scope.scalecolor = function(perc) {
return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) !important }
};
or alternatively when I try this in the html template
ng-style="scalecolor(10) !important"
Anyone out there that knows how I can use the !important css keyword with the Angularjs ng-style directive to override the bootstrap3 wildcard?
For those who want to see this with their own eyes, here's a plunker showing the issue
Apparently you can't and it's a known issue but there is some workaround that can be found here:
https://github.com/angular/angular.js/issues/5379
The solution below has been copied from the site just in case the link breaks, or get changed.
You're not able to use the !important directive in the DOM style property in either Chrome nor FF (probably others too). The style attribute gets parsed as CSS, but the HTMLElement.style property doesn't. Unfortunately you're not able to set a property's priority here (in Gecko/Blink/Webkit, at least).
So, there are some workarounds here:
Workaround #1
<ANY data-ng-attr-style="{{ blue && 'background-color: blue!important' || '' }}">
</ANY>
This would be your best way to go in terms of browser-support, because the CSS property priority will get parsed correctly here.
Workaround #2
Alternatively, you can also do the following in javascript:
$scope.$watch(conditionalStyle);
function conditionalStyle() {
if ($scope.blue) {
$element[0].style.setProprety('background-color', 'blue', 'important');
} else {
$element[0].style.backgroundColor = '';
}
}
Where $element is a jQuery/jqLite object referencing an HTMLElement.
Note: caveats are not supported in IE < 9 so workaround #1 is probably your best bet for this behavior where you depend on property priority...
Using the tips for #Wawy I updated my code to get it to work.
For anyone landing on this page, for clarification I made an updated Plunker that can be found here
In short, this is now the html part
<div class="heatmap" ng-attr-style="{{ngAttrScaleColor(10)}}">YES, ng-attr-style works !</div>
and this is the controller part
$scope.ngAttrScaleColor = function(perc) {
return 'background-color: ' + plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) + '!important';
};