I wanted to give the unselected tabs of Pivot a border so they look like real tabs.
I figured out it is actually styling a button so I created:
const headerProps: IButtonProps = {
styles: {
flexContainer:{'border': '1px solid '},
}
};
but flexContainer selector does not cover the whole width of the tab.
root does not show border at all.
there are too many selectors in IButtonStyles to test :-)
Anyone knows which it is?
Thank you
Related
I am trying to remove the label in the linechart. For that i have tried by giving empty label but in the graph it dispayed color box without the label .
ChartSeries boys = new ChartSeries();
boys.setLabel("");
If i tried without setting the label. It displayed color box with "null" as label.
I don't know if this is an option for you, but you could hide the entire legend box using css. Something like this:
.jqplot-table-legend {
display: none;
}
Solved my issue
yourChart.options = {
legend: {
display: false,
}
};
I want to be able to change the colour of this exact entire map. I am using map bubble I want a darker color for the countries and continents. how can i achieve this as colorAxis will change the data representation(bubble) colour not the map colour.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/map-bubble/
apparently this does not work :(
colorAxis : {
color: 'red'
},
You can try replacing color property with nullColor. What it does is changing the color of all shapes to red.
Please check my fiddle: JSFIDDLE
{
name: 'Countries',
mapData: mapData,
//color: '#E0E0E0',
nullColor: 'red',
enableMouseTracking: false
}
Thanks
i need to insert a title (not a tooltip, a text on the top) inside the svg rendered by Dojo. How can i do that?
Here my Dgauge:
http://jsfiddle.net/MacroX/pZU93/1/
PD: The line
gauge.title = 'Test Report'
doesnt show the title
EDIT: The question is regarding a label at the top of the gauge, not the title attribute as I originally thought.
You can use a TextIndicator much like you did for the value label below the needle, but you can set a labelFunc property that defines a function called to set a label and displays whatever string is returned from it.
var labelText = new TextIndicator();
labelText.set('x', 73.3);
labelText.set('y', 55);
labelText.set('labelFunc', function() {return 'Test Report';});
gauge.addElement('labelText', labelText);
Here is a modified version of your fiddle with the title text in place.
Original answer remans below in case someone else needs it
Pass the title in when you create the gauge:
var gauge = new CircularLinearGauge({
title: 'Test Report'
}, dojo.byId("gauge"));
You can also use set to set it after the gauge is created:
gauge.set('title', 'Test Report'); //does work :)
The reason for this is that the gauge widget needs to set the text you give as the title on a specific element within the widget's template. gauge.title just sets the title property of the gauge widget, and the widget has no idea when or with what value that property is being set and thus is not able to make it show up as a title attribute on the gauge.
Finally i got a way to resolve this, and this is useful when you need to personalize your dgauge. Here the example:
http://jsfiddle.net/MacroX/THJqV/
What i did is basicly create a gauge, fill it with background white, and then add elements inside
var baseWidth = 400;
gauge.addElement("background", function (g) {
var auxHeight = baseWidth * objGauge.offsetHeight / objGauge.offsetWidth;
g.createRect({
width: 400, height: auxHeight
//width: 400, height: 300
}).setFill("#FFF");
});
I dont know if is the best way, but works and i didnt find something similar in other sites
And what I think is great, this support multiple chart dgauges in only one SVG
I hope this will useful to someone else
I'm using DOJO's ContentPane module. I have a div element in one of the panes and I need to give it a certain height - 100 pixels less than the height of the ContentPane so that the div changes its height dynamically when you change the ContentPane size by dragging the splitters. I'm new to Dojo and would be happy if somebody could help me with this.
Thanks.
I think the best solution is via nested BorderContainers with properly set splitters, because that way dijit/layout will take care of resizing and you won't need to write any JavaScript code and your layout will be based solely on CSS.
It's kinda cumbersome to explain, so I created a working example for you at jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + a diagram:
NB: Do not forget to set height: 100% for html, body and the top BorderContainer.
The drawback of this solution is you will have to replace plain divs with ContentPanes. If you do not want to or can't you can use dojo/aspect and connect to BorderContainer or ContentPane resize method and resize your divs manually whenever the size changes:
require([
"dojo/ready",
"dojo/aspect",
"dijit/registry",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
], function(
ready,
aspect,
registry
) {
ready(function() {
var bc = registry.byId("borderContainer1");
aspect.after(bc, "resize", function() {
// calculate and set <div> size here
console.log("resize divs");
});
});
});
I have just changed my version of Flot from 0.6 to 0.7, however, when I do this, the legend in my Flot graph changes style. Previously, I had used the "LabelClass" attribute to change the style but on reading the source for 0.7 I see that "labelClass" is no longer an option and I appear to be forced to use the "table" CSS definition that is used throughout the site that I'm working on. Because of this I can't change the site's CSS "table" definition.
Is there another good method for changing the definition of a legend or am I stuck?
Apologies in advance is this is just a newbie question
Kind Regards
It has changed names is all, the new class is legendLabel for the labels and legendColorBox for the color box.
You can see this in jquery.flot.js.
EDIT in response, it seems that the question is how do you style the whole table. Assume your flot placeholder is something like this:
<div id="foo" style="width:600px;height:300px"></div>
Then you can define CSS like this:
#foo > div.legend > table {
border: 2px red solid;
}
See it here in action: http://jsfiddle.net/ryleyb/YkDpG/1/
Another way to style the legend is to use the jQuery .css() (http://api.jquery.com/css/) method after the chart has been plotted.
For example:
$.plot($("#chartFoo"), pieChartData, options);
$("#chartFoo div.legend table").css("border", "1px solid #888888");
$("#chartFoo div.legend table").css("background", "#ffffee");
or:
$.plot($("#chartFoo"), pieChartData, options);
$("#chartFoo div.legend table").css({ border: "1px solid #888888", background: "#ffffee" });