I am trying to center align my google chart but have been unsuccessful in doing so. I have played with padding to move it to the center but I don't want to sit there and play with firebug for long time and figure out the correct position. Is there any simpler such as aligning text text-align: center. Obviously it doesn't work with google charts. (I am new to all of this)
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
...some code ...
<div id='chart_div' style='width: 900px; height: 400px;'></div>
although I did this padding-left: 140px but is there any better way like align: center
Give the chart_div: display: block and margin: 0 auto;
You could also do <div id='chart_div' align='center'> This worked for me, although now my chart hovering function isn't working. Anyone else get this problem? I'm talking about when you hover the mouse over a point on the graph. It usually shows the point such as Jan Sales 440. Anyone know of a fix?
I have been facing the same issue with a google gauge. Checking the code generated I realized that the next thing inside the <div id='chart_div'> is a table with margin 0 set as inline style.
So in order to override it I used the following css:
div.chart_div table {
width: auto;
margin: 0 auto !important;
}
And this worked.
The accepted answer is broken; you have to use display: inline-block to center align your chart.
Since width is fixed, try setting margin-left and margin-right to auto. It should work assuming that the position is relative.
Any of these answers doesn't work for me so i did that:
<div class="chart_box">
<div id="chart_div" style='width: 900px; height: 400px;'></div>
</div>
.chart_box {
width: 900px;
margin: 0 auto;
}
You need to use same width for chart_div and chart_box.
Set chart_div to following properties:
#chart_div{
display: inline-block;
margin: 0 auto;
}
Notice: when you remove the side menu ("legend: 'none'") the width should be altered.
This happens mostly when you go "legend: 'none'" because it leaves the side space that was there to hold that menu, not adjusting the width automatically. You need to re set the width and NARROW it, to manipulate its alignment:
var options = {
title: 'center alignment',
width: 350,
height: 350,
legend: 'none'
};
I combined a few of the answers here, as follows:
Create a css class:
.customChartStyle{
border:1px solid #eee;
text-align:center !important;
}
and add it to the table's cells by adding the following to my table.draw() call:
'allowHtml': true, 'cssClassNames': {'tableCell': 'customChartStyle'}}
I'm new to google charts but the key for me was adding !important to the text-align style (thanks thanassis). For my case I needed the border style because overriding the tableCell style removed that otherwise. Also I prefer defining the class and letting the charts api apply it instead of overriding the styles generated by the api.
Subscribe to the ready event to modify the CSS with JavaScript. Something like below will do the trick.
google.charts.load('current', {
'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var guageOptions = {
width: 400,
height: 120,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
minorTicks: 5
};
var guage = new google.visualization.Gauge(document.getElementById('my-div'));
// HERE'S HOW TO SUBSCRIBE TO THE EVENT
google.visualization.events.addListener(guage, 'ready', resetTableStyle);
guage.draw(data, guageOptions);
// HERE'S THE JAVASCRIPT TO SET YOUR CSS
// NOTE TOGGLING A CSS CLASS HERE IS PROBABLY CLEANEST
function resetTableStyle(){
var myDiv = document.getElementById('my-div');
var myTable = myDiv.getElementsByTagName('table')[0];
myTable.style.margin = 'auto';
}
Below code works for me:
width:fit-content;
margin:0 auto;
By implementing a class to my div, it can now be centered.
HTML
<div id="chart_div2" class="chart_hum"></div>
CSS
.chart_hum {
margin: 0 auto;
display: inline-block;
}
Related
I am using BalkanGraph plugin and I'm trying to align the first parent node of the orgchart to the top of the svg instead of the center of it.
I tried to set a negative "margin-top" and increases the height of the whole svg, but then the click goes with it, and it doesn't work well.
My only css is this:
#tree {
width: 100%;
height: 630px;
border: 1px solid lightgray;
background-color: #fff;
}
and the things I am using in Orgchart are these:
var chart = new OrgChart(document.getElementById("tree"), {
mouseScroolBehaviour: BALKANGraph.action.zoom,
nodeMouseClickBehaviour: BALKANGraph.action.none,
scaleInitial: BALKANGraph.match.boundary,
collapse: {
level: 2,
allChildren: true
},
});
Set align option to BALKANGraph.ORIENTATION
var chart = new OrgChart(document.getElementById("tree"), {
align: BALKANGraph.ORIENTATION,
...
});
Is it possible with CSS/HTML to resize some box to match exactly it's background image size? Without using javascript.
For instance let's say I have a simplest div:
<div class="image">TEST</div>
.image {
background-image: url(http://placehold.it/350x150);
width: 350px;
height: 150px;
}
And I would like to resize it to those 350x150 dimensions without hardcoding those values. Also I cannot put any content inside this div.
http://jsfiddle.net/5Dane/
EDIT: I see a lot of answers I already was aware of, thank you for them, but that's not the solution here unfortunately. Below I'm explaining why I need such functionality.
What I'm trying to do is a form with steps (buttons previous and next). In session I hold all the values the user has input but there are some buttons which will add more functionality for the user (like multiple dynamically added rows for data). I'm doing it with jQuery of course, but I want the form to be able to work when there is no java script enabled.
Now to the point - I was trying to find out how to tell the difference which button the user has clicked. The case is all my submit buttons need to be images and the simplest solution <input type="image"/> doesn't send info about the button clicked with POST data. That's why I came to this solution:
<input class="submit_img" type="submit" style="background-image:url(http://placehold.it/108x23); width:108px; height: 23px;" value=" " name="some" />
/* Submit button with image */
input.submit_img {
font-size: 1em;
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.15) 0 1px 1px;
border: solid 0px #000000;
cursor: pointer;
}
http://jsfiddle.net/XRvqV/
This way my form will submit all the data AND I will know which button the user clicked. Also the button looks fine, like it should look. I was wondering though if it was possible to make it a little more portable - my buttons all have different widths for different functions. Can someone suggest another approach here?
No, you can't. CSS is not aware of the the image size. You can do it easily with JQuery.
JQuery exmaple
$(function(){
var bg = $("div.image").css('background-image');
bg = bg.replace('url(','').replace(')','');
var newImg = new Image();
newImg.src = bg;
$("div.image").css("width",newImg.width);
$("div.image").css("height",newImg.height);
});
This is a hack and doesn't use background-image (uses an img tag instead), but is the only way I can think of without using JS.
HTML
<div class="container">
<div class="image">
<img src="http://www.pandafix.com/pandafix/images/untitled_1.jpg"/>
</div>
<div class="content">
some text
<br/>
some more text
<br/><br/><br/><br/>
text text text
</div>
</div>
CSS
.container {
position: relative;
}
.content {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: red;
}
Basically, you allow an img tag to determine the height and width of a container. Then, overlay whatever content you want on top of the image (I'm assuming you want to put something on top).
jsFiddle
i would suggest you a alternative way to solve your problem. if you use bootstrap you can involve a div to make resizable image.
<div class="img-responsive">
<img src="test.jpg" width='xxx' height='yyy' alt='test'>
</div>
You can't do that using just HTML. But you can do this using HTML!
You should try this:
background-size: values;
This way, you will resize the background-image to the size of the container!
You can't do it directly.
The only solution it would be fetching the BG of the DIV element and attach new DOM img element to the DOM node, afterwards you could use the info of the image to add the proper with and height..
if you are willing to use jquery you can do this.
$(function(){
$('.image').each(function(index,element){
var _t = $(this);
_t.data("LinkedImg","LinkedImage"+index);
$('body').append(
$('<img />',{
id:"LinkedImage"+index,
src:_t.css('background-image')
}).hide());
});
$('document').on('load',function(){
$('.image').each(function(index,element){
var _t = $(this);
var _tmp_img = $('#'+ _t.data("LinkedImg"));
_t.css({
width:_tmp_img.width(),
height: _tmp_img.height()
});
});
});
})
I have an app built on Cordova and on some of my pages I am able to scroll horizontally out of my content into white space.
This is weird as I have nothing there that extends beyond my #wrapper, which is set to width: 100%.
So I was wondering if there was a way I could disable horizontal scrolling in the app altogether?
UPDATE:
Code on page as requested:
body {
background-color: #fff;
font-family:Arial, Helvetica, sans-serif;
color: #b7b8b9;
height: 100%;
width: 100%;
}
iframe{
border: none;
width: 100%;
/*margin-top: 50px;*/
}
#header{
height: 50px;
width: 100%;
}
<body>
<div id="wrapper">
<div id="header">
<div class="headerback">Home</div>
<div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('Refresh')</script></div>
<div class="headertitle"><h2>Get the Look</h2></div>
</div><!--HEADER-->
<iframe src="http://www.mbff.com.au/getthelook"></iframe>
</div>
</body>
Try to debug your page in Chrome (webkit) with the exact dimensions of your device. This solves most rendering issues for me.
I do not know the specific issue here, but it looks like one of your elements is flowing outside of the wrapper. You could for example try this in your css:
div.wrapper { overflow: hidden; width: inherit; }
Although it might be a better idea to find out why your page is expanding horizontally?
I was looking for the solution to this problem for a long time.
Finally I solved it in the following way.
I set style for bodyand html tags:
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
After that I've added div to body and set the style for it:
overflow-y: auto;
height: 100%;
So, I have got fixed body, which contains div with vertical scroll bar.
// Phone Gap disable only horizontal scrolling in Android.
// Add this code in your Phone Gap Main Activity.Initially Declare the variable
private float m_downX;
//Then add this code after loadUrl
this.appView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
// save the x
m_downX = event.getX();
}
break;
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP: {
// set x so that it doesn't move
event.setLocation(m_downX, event.getY());
}
break;
}
return false;
}
});
Try adding the following code to your .html file:
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
For the sake of completeness, I thought the answer which makes use of the official method of doing such a thing via the preference tag should be added:
<preference name="DisallowOverscroll" value="true"/>
Supported by Android and iOS according the documentation.
Default: false
Set to true if you don't want the interface to display any feedback when users scroll past the beginning or end of content. On iOS, overscroll gestures cause content to bounce back to its original position. on Android, they produce a more subtle glowing effect along the top or bottom edge of the content.
In my case it was broken styling like below
<body>
<div style="margin-left:5%; width:100%">Content</div>
</body>
which cause div to became horizontally bigger than body. I could see scroll when app run in browser. Set width to 90% (as it was initially intended) fixed the problem.
Generally, as it already pointed out here, enough to find element with wrong style which makes your page expanding horizontally and fix it.
BTW DisallowOverscroll was not helpful in above case.
Somewhere in a page, how to make div-a2 position above div-a1? Of course, I cannot make div-a2 above div-a1 in the layout below.
<div id=a>
<div id=a1> something here
</div>
<div id=a2> show this part first
</div>
</div>
still looking for better solution. thanks
You can achieve this with pure css. Write like this:
#a{
display:-moz-box;
display:box;
display:-webkit-box;
-moz-box-direction:reverse;
box-direction: reverse;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
}
'
Check this http://jsfiddle.net/ASVtx/1/
You will need to give the elements absolute position css, and then position them appropriately depending on the content size of each like:
#a1,#a2{position:absolute;}
#a2{ top: 0; }
#a1{ top: 200px;}
OR, within the parent:
#a1,#a2{position:relative;}
#a2{ top: 0; }
#a1{ top: 200px;}
Or, a perhaps better alternate is to change the layout order (but I assume that is not possible for some reason not stated).
Here is an example: http://jsfiddle.net/MarkSchultheiss/CRCvU/
See this updated example where I used em instead of px for the position, gave the parent a border so you see its scope, and added stuff around the parent. http://jsfiddle.net/MarkSchultheiss/CRCvU/1/
Just in case you want to go that way, here is the jQuery code to do this:
var ah1 = $('#a1').height();
var ah2 = $('#a2').height();
var ah = $('#a').height();
var relpos = {float:"left",
display: "inline-block",
position: "relative",
clear: "both"
};
$('#a').css({
height: ah
});
$('#a1, #a2').css(relpos);
$('#a2').css('top', -ah1);
$('#a1').css('top', ah2);
Working scripted example here: http://jsfiddle.net/MarkSchultheiss/CRCvU/3/
Anyone with any ideas on what's causing this weird glitch with the google maps UI components, be really grateful to hear from you!
the map is created with:
var options = {
zoom: <?php echo $this->zoom ?>,
center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
and the glitch is the same even with no markers.
We ran into the same problem. The css designer was using this style:
style.css
img {max-width: 100%; }
Instead of disabling the zoom control, we fixed the problem by overriding the img style for map_canvas elements like so:
style.css:
#map_canvas img { max-width: none; }
The zoom control now displays correctly.
Setting "img max-width:100%" is a technique employed in responsive/fluid web site design so that images re-size proportionally when the browser is re-sized. Apparently some css grid systems have started setting this style by default. More info about fluid images here: http://www.alistapart.com/articles/fluid-images/ Not sure why this conflicts with the google map...
With latest version of google maps api you need this:
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
Looks like a problem with the zoom control. Try adding zoomControl:false to your options.
In fact it seems the normal zoom slider is positioned off to the left of the page (use Firebug > Inspect Element). Could be a CSS conflict?
Well I got the fix for this:
On your CSS you added something like:
img {max-width: 100%; height: auto;}
try not to make it global and it should fix you :)
This worked for me:
#map img { max-width: none !important; } (from Patrick's answer)
the attribute "!important" makes sure to override any other style, #map is the id assigned when you declare the new object Gmaps:
<script>
map = new GMaps({
div: '#map', <- your id
lat: *******,
lng: *******,
scrollwheel: false,
panControl: true,
....
...
</script>
if you are using the Dreamweaver fluid grid feature your default set up should look like this:
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
Try this:
object, embed, video {
max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
just replace the code as it is.
Bootstrap (as of version 2.3.2) messes with images in the same way as in the accepted answer.
In fact, I suspect that the design used in Haroldo's website uses Bootstrap.
I'm just posting this because no one else mentioned Bootstrap, and someone might be looking for a Bootstrap-specific solution.
I ran into this problem on my Square Space website. I did not have access to the CSS style sheet. Since you are embedding an html doc, you can just use inline CSS to fix the problem. I modified the style of the container instead of making a site wide change (which I couldn't do). Here is what I did:
<style>
html, body, #map-canvas {
height: 600px;
width: 100%;
margin: 0px;
padding: 0px
}
#map-canvas img {max-width: none;}
</style>