Here is my plunker. I have passing json object to chart, i want to give width 100% to line chart and height to 100px, but when we minimizing height css does not work expected. The chart does not take height and width of its parent div/panel.
Use custom CSS to specify the dimensions:
CSS:
.panel{width:100%;height:300px;}
.panel-body{width:100%;height:270px;}
.chart-container{height:100%!important;}
canvas{width:100%;height:100%!important;}
Demo: http://plnkr.co/edit/gVRwrEKWA9HaTCWgbyIS?p=preview
When a window is resized, the canvas and the graph gets new dimension as inline style which overrides the css rules in the stylesheets. To prevent this override, use !important
Finally i have to manage to resize chart by adding one more global variable in chart.js and assigning its value from our controller where we defined our chart.
In chart.js we can assign our new height as:
canvas.height = this.chart.height = Chart.defaults.global.defaultHeight; // newHeight;
In our controller we can change/update it as:
Chart.defaults.global.defaultHeight = 250;
I did not know any other way which will be better, any other suggestion will be appreciated.
Related
Alloy UI's DataTable provides a scrollable attribute to define x or y scrolling. This has to be used with a combination of a set height or width.
How can I have a table that will adjust to whatever the height/width of the window along with maintaining the scrollable feature?
Alloy UI API allows you to specify height & width in the px or round number.
If you want to specify in the percentage, set the CSS property "width: 100%" for either the DataTable's table tag, or the div that contains the DataTable.
Example,
First, create a datatable.
Add the CSS attribute for width in percentage
*
var dataTable = new Y.DataTable({
id: 'mydata-table',
footerView: Y.FooterView,
scrollable: "xy",
height:'300px').render();
$('#mydata-table').css('width', '80%');
$('#mydata-table').css('height', '40%');
Please refer the link for detail.
Try this code,
it worked for me in mobile as well as desktop.
container.find(".dataTables_scrollBody").css('height', container.height() - 20);
here the container is a <div> where the datatable is placed.
Im trying to get a dynamic scrollpane in my JavaFX (FXML) application using CSS. my CSS for the scrollpane looks like this:
.scroll-pane {
-fx-width: 80%;
-fx-height: 80%;
-fx-background-color: #FF3333;
}
the color works, but the size properties don't if I open the CSS in JavaFX scene builder it doesn't show the height and width lines at all.
I assume im missing something pretty basic, but I can't seem to figure it out.
As far as I know you cant use -fx-width/-fx-height at all and you cant use percentage values for it. The width and height of elements are read-only. You can set -fx-pref-width, -fx-pref-height, -fx-max-width, -fx-min-width, -fx-max-height and -fx-min-height to adjust the size of Java FX elements.
Check the CSS Reference Documentation out to see which CSS styles are possible.
If you want to have the size as percentage you probably need to bind the size to another property.
As example:
myView.prefWidthProperty().bind(myOtherView.widthProperty().multiply(0.75));
There is another post about percentage values with the use of a GridLayout.
How do specify a width percentage in JavaFX 2 using FXML?
I have implementing Google TreeMap
Since I am using ExtJS Layout and within it is the TreeMap, I had to use iframe, otherwise it would not display anything.
But there is one problem, the Google Map Visualization is defining random svg property.
How to overwrite this random property in my html page and give it a fixed width and height value. Note: I defined fixed width to the charts div, also to the iframe, but nothing is working as svg is overwriting that property.
http://i.stack.imgur.com/i6Pze.png
Call document.getElementsByTagNameNS("http://www.w3.org/2000/svg","svg") to get all the svg elements then iterate through them and set height and width attributes as necessary.
var svgElements = document.getElementsByTagNameNS("http://www.w3.org/2000/svg","svg");
for (var i = 0; i < svgElements.length; i++) {
var svgElement= svgElements.item(i);
svgElement.setAttribute("width", "<whatever width you want>");
svgElement.setAttribute("height", "<whatever height you want>");
}
I am trying to increase the height of container with increase in the number of contents inside the container.
Like in my case i m using tileList inside tabNavigator , when I put contents inside the tileList, the height of tileList does not increase
beyond vertical height of the viewport. It puts scrollbar on the container. I want to increase the height of an flex container with increase in the contents and introduce
scrollbar on the browser with increase in contents in the flex container.
Could anybody please suggest me how I could achieve this.
Thanks in advance.
You need to write a javascript function which increases the height of embed object and you need to call this javascript method from flex while adding a new item to tile list.
This link explains how to access javascript from flex.
Have considered using javascript and resize the element directly in the source HTML?
The JS code could look something like that:
function changeSize(id) {
var flex = document.getElementById(id);
flex.setAttribute("width", "800");
flex.setAttribute("height", "600");
}
I have an application control bar at the bottom of my Flex application (with attributes width="100%", dock="false", left="0", bottom="0", height="50"). It contains a lot of elements (like buttons and labels). The width of the SWF is the width of the browser.
When the user makes the width of the browser window smaller, after a certain point, the components on the application control bar gets "squished": they are forced on top of each other. And so, it becomes confusing and ugly. To ensure that that doesn't happen, I've set the minWidth attribute to a value so that it'll always display the components without them overlapping each other.
But then, a horizontal scrollbar appears and hides the bottom half of the application control bar.
I've googled and I found this article: flex verticalscrollpolicy bug (referenced by this SO question: Flex: Prevent scrollbar from covering content when automatically displayed).
But that seems to apply only to a fixed size component. My component's width is a percentage. Any ideas on how to have the horizontal scrollbar appear and have it not cover up the application control bar?
Thanks!
See if adding the following code to the overriden validateSize method (as in the scrollpolicy bug page you linked to) solves the problem.
if (width < measuredWidth)
{
height = normal-height + height-of-the-horizontal-scrollbar;
}
else
height = normal-height;
(Find the normal height of the application control bar and the scroll bar (trace them out) and use those values).
So this happens when the ApplicationControlBar is fixed at the bottom: bottom=0 and left=0. The easiest solution is to make the bar a lot taller (that'll push the content way higher than the scrollbar height). But that makes it kinda ugly.
So another solution: in the MXML file, I capture the Resize event. And in that function, I do this:
if (width < bar.minWidth) // width is the width of the SWF
{
bar.height = ORIGINAL_SIZE + 10;
hbox.setStyle("verticalAlign", "top");
hbox.setStyle("verticalCenter", -10);
} else {
// normal case
box.height = ORIGINAL_SIZE;
hbox.setStyle("verticalAlign", "middle");
hbox.setStyle("verticalCenter", 0);
}
And the horizontal scrollbar doesn't hide the content anymore! Also, the Resize event doesn't get triggered when the bar has a minWidth & the width of the stage is less than that.
I had this come up today and I slightly tweaked sri's if statement like this:
if (buttonContainer.horizontalScrollbar)
{
// Change height & style properties
}
else
{
// Return to original properties.
}