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>");
}
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.
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.
I'm adapting a wordpress theme and it would be nice to have the text of the whole page scale depending on the width of each container div.
So far all the widths are in % but as w3c mentions the font-size property only takes into account the font-size of the parent and not the size of the container div.
As multiple other answers hint, I could do that with javascript and target each container div,
which though being a very helpful answer from my point of view doesn't apply to my problem because I dont know all the possible container ids or classes since I have to account for future plugin installations which could output text, e.t.c.
so is there any other way to do this?
Not without Javascript. CSS bases font-size percentages based on height of a line, there are no width-based controls.
I'd strongly recommend changing your design.
If you want to try to go with it, I'm not sure how proficient you are at Javascript, but you could iterate through DOM nodes, look for a common condition, find the width of the DIV, and move forward that way.
one possible solution could be to target only the body element and change its font-size, this way every font-size should adapt due to the parent changing.
this solution combined with media queries to target the most common screen size should be perfect.
Based on that, I pieced together the following ( http://jsfiddle.net/8TrTU/73/ )
function adaptFontSize() {
var defaultW = 100;
var defaultFontSize = 16;
var width = parseInt($("#header").width());
var fontSize = (defaultFontSize * width)/defaultW+"px";
$("#page").css('font-size', fontSize);
// alert(width +" "+ defaultFontSize * width+ " " fontSize);
}
$(document).ready(adaptFontSize);
$(window).resize(adaptFontSize);
opinions? possible improvements?
I need to give an overlay texture to 100+ images
like this.
I have transparent .PNG texture file. if i use this as background then it will go behind the <img>. And I don't want to add another <img> or any extra span, div for texture and z-index.
Is there any other way to achieve it in CSS?
I need to use specific texture .png so i cannot use CSS gradient only.
I don't want to use main product image as background.
I'm afraid you're going to have a very hard time getting that texture overlaid on the image without some added element to put it on. If you can't affect the html output, a little javascript would do the trick.
Another option is to place the texture over the top of the other image with absolute positioning. It's hard to know if that's a viable option without more context, however. Here's an example: http://jsfiddle.net/cPSFQ/1/.
Glad your post is tagged with CSS3
http://jsfiddle.net/WQTeE/2/
You have to create a reverse mask of the overlay. I tested this in FF9 and Chrome 16
img.stockphoto{
-webkit-mask-box-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
-o-mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
-moz-mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
}
You can try this.
http://jsfiddle.net/Bs7nv/
In this all I am doing is displaying an image and a div in which we can use the texture image as background and absolute positioning to display over the actual image.
There is no pure css solution to your question that's cross browser compatible. I realize that this answer doesn't meet your original criteria, but I figured I'd supply it anyways so that you could have it as an option.
Using pseudo elements (:before) would be a logical choice for CSS3, but alas, they don't work on img tags.
You'll have to do something, rather change the mark-up or add some javascript. Assuming you can't edit the mark-up (sometimes you can't control your source data), but can control the javascript, you could do it with pure javascript like this:
var transparentImage = "http://rd.cas.de/tim/native/image.png";
var imageList = document.getElementsByTagName("img");
var arrImages = [];
for (var i = 0; i < imageList.length; i++ ) {
// store the images as is first, otherwise the list is living and
// you loop forever...
arrImages.push(imageList[i]);
}
for (i = 0; i < arrImages.length; i++ ) {
// first wrap all the images in a relative positioned div.
var wrapper = document.createElement('div');
var newImg = document.createElement("img");
newImg.setAttribute("src", transparentImage);
newImg.style.position = "absolute";
wrapper.appendChild(newImg);
wrapper.appendChild(arrImages[i].cloneNode(true));
arrImages[i].parentNode.replaceChild(wrapper, arrImages[i]);
}
Here's a jsfiddle that does what you want (but with javascript).
I have use the mx:Grid layout component to layout some form elements in a manner very similar to an HTML table. However, the result does not stretch out horizontally when you resize the app like an HTML table would. How can I make it do that?
Try setting the width and height of the Grid element to a percentage value.
I'm using a Grid on one of my main applications, and I've set the width/height to 100% and it resizes just fine.
You'll likely need to set the width and height of the rows and items (GridRow and GridItem) as well, depending on how you want the rows/columns to resize.
Edit if you're creating the Grid programmatically (e.g. in a .as file), you'll need to set these values as percentages as follows:
var grid:Grid = new Grid();
grid.percentWidth = 100;
grid.percentHeight = 100;