How to align a Google chart to the left on a webpage with the help of bootstrap 3

On my webpage, I have the following div elements:

<div><h2>Test</h2></div>
<div id="chart_div" style="width: 1200px; height: 600px;"></div>

Without any custom styling, only using the default Bootstrap 3 styles. However, the Google chart displayed has excessive empty space on the left side (refer to the screenshot). Is there a solution to adjust this?

Resolution Update: Following davidkonrad's recommendation, I included the following option in my chart settings:

chartArea : { left: 30, top: 30 }

This adjustment resolved the issue.

csstwitter-bootstrapgoogle-visualization

Answer №1

The issue is not related to bootstrap - similar behavior can be seen in a fresh bootstrap 3 setup. The problem arises from the excessively large width of the container.

When chartArea is left undefined, the values for chartArea.left, top, width, and height default to auto, causing the chart to attempt centering itself within the container both vertically and horizontally. This can be confirmed by adding a border around the container. To specify the chart position, set chartArea.left to the desired value, for example:

var options = {
   chartArea : { left: 80 }
};

or

var options = {
  chartArea : { left: "10%" }
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

D3 Chart: What is the best way to insert images into a node?

Within the jsFiddle demo provided in this query, there is code displayed. I am curious about how I can assign images to each node. var graph = { "nodes":[ {"name":"1","rating":90,"id":2951}, ] } You can access my jsFiddle Demo through this ...

javascriptjquerycssd3.js

Deciding on the Best Watcher for Running `make watch` in Twitter Bootstrap

When it comes to making watch on Twitter Bootstrap, should we be utilizing watchr for Node.js or the gem watchr? A previous discussion recommended using the gem version of watchr. I attempted to do this with gem watchr, following the instructions from htt ...

node.jstwitter-bootstraprubygemswatchr

What is the method for adding an event listener in AngularJS within an ng-repeat iteration?

I'm completely new to AngularJS and currently working on building a photo gallery. The basic idea is to have an initial page displaying thumbnail photos from Twitter and Instagram using an AngularJS ng-repeat loop. When a user hovers over an image, I ...

javascripthtmlcssangularjs

What is the method for adjusting the success button's color using SASS?

My current theme's success button is green, but I want to change it to yellow. How can I achieve this? In the _variables.scss file, the following lines are present: $btn-success-color: $btn-default-color !default; $btn-success-bg: ...

csstwitter-bootstraptwitter-bootstrap-3sassbootstrap-4

JavaScript-enhanced HTML form validation

I encountered a small glitch while working on simple form validation with JavaScript. I tried to catch the issue but have been unable to do so. Here is the code snippet, where the problem lies in the fact that the select list does not get validated and I ...

javascripthtmlcss

adjust division size proportionally to another one

I am trying to create a layout with right and left divisions where the size of the left division matches the height of the browser window (100vh). The left division consists of two sub-divisions that need to have variable sizes but collectively match the ...

htmlcsstwitter-bootstrap

Issues with connecting local CSS and JS files to HTML pages

I am facing an issue with my base HTML file that I want all other pages to inherit certain characteristics from. The problem arises when I try to link an external CSS file like bootstrap.css from within my project directory. I have the file stored in the s ...

javascripthtmlcsshyperlinktornado

Explore the world of threejs with a sphere adorned with cube bumps

Currently, I am navigating through the internet in search of a solution for my problem. The example I came across is quite impressive, take a look: . My dilemma lies in converting these squares into CSS cubes while ensuring that they do not get cut off by ...

javascriptcssthree.js

Tips for choosing the nearest table rows with CSS

When it comes to CSS, specifying a style for the immediate child rows of a table can be done like this: table > tr { background: blue; } The challenge arises when we have a <tbody> tag surrounding the <tr> tags. Is there a way to addre ...

htmlcss

Rotating a CSS div causes the page to scroll horizontally

Currently, I am working on creating a unique design for the footer of my website. However, when implementing it, I encountered an issue that is causing a horizontal scroll (red background added for clarity). https://i.sstatic.net/K4vnV.jpg To address thi ...

htmlcssrotationcss-transformshorizontal-scrolling

Understanding the positioning of HTML elements using CSS

If you have the HTML snippet below: ... <fieldset> <div>above or below</div> <div>content</div> </fieldset> ... Is there a way to use CSS to position the <div>above or below</div> above or below the < ...

htmlcsscss-position

Placing the navigation bar on the right side of the section

.middle-site-content-container { width: auto; height: auto; border: 2px red solid; display: flex; /*Le pot pozitiona in line*/ flex-wrap: wrap; justify-content: center; flex-direction: row; margin: auto; } .middle-site-content-1, .middle ...

htmlcssflexbox

Error with adaptable menu

I am attempting to develop a responsive menu similar to the Bootstrap nav bar using only CSS. I have managed to get the functionality working, but the positioning of the menu grabber is incorrect and I'm unsure how to correct it. The grabber should al ...

htmlcssresponsive-design

Assistance needed in keeping an image with absolute positioning CSS fixed to the top left corner of the browser

Looking for some CSS help as a beginner here! I've been trying to position a transparent PNG image over a centered table, but it seems stuck in the upper left corner of the browser. Absolute positioning should give me freedom to move it around, right? ...

csshtmlabsolute

The peculiar formatting issue with the jQuery datepicker that arises when adding more months

When adjusting the numberOfMonths parameter to a higher value such as 6, I noticed that the datepicker display appears unusual with the background extending further than expected. Take a look at my demonstration on jsfiddle: http://jsfiddle.net/zw3z2vjh/ ...

javascriptjquerycssdatepicker

Issue with drop-down menu functionality on mobile-friendly website

After deciding to revamp my website for responsiveness, I encountered an issue with the menu not displaying on smaller screens. Everything else is functioning correctly except for the drop-down menu! Here is the HTML code: <!doctype html> <html ...

jqueryhtmlcss

Styling in CSS is being applied to a button element within a React component,

Having trouble with a button styled with the className 'actions' The button displays the CSS styling from '.actions', but not '.actions button'. Both should be applied. This code snippet works for all elements ...

javascripthtmlcssreactjs

Struggling to align button text vertically in the center

I've searched through various sources, including stackoverflow.com and other websites, to solve this problem I'm encountering. Despite trying everything I found, I still can't get the text to center vertically in Firefox when styling buttons ...

htmlcss

Refresh the block's content seamlessly without the need for a page reload

Within the index.html page There exists a block called content that contains various content blocks. An additional navigation menu with numerous links is present. It is important that when you click on a menu link, the content within the content block re ...

javascriptjqueryhtmlcssajax

Problems with scrolling in the navigation bar, main content area, and footer

The challenge Encountering a scrolling anomaly with the Navigation Bar, Body, and Footer while utilizing Bootstrap 4. Everything appears to function smoothly on the desktop view. The glitch arises when I reduce the viewport size. The body fails to stay in ...

htmlcssbootstrap-4