What is the best way to eliminate the space underneath a graph?

Despite trying multiple solutions, I'm still struggling to remove the excess blue space below the graph that appears when clicking the submit button.

Any insights into what might be causing this issue?

JSFIDDLE

Below are the CSS styles related to the problem:

#cccontainer {
    width: 800px;
    padding: 0px; 
    margin: 0px; 
    background-color: #447bc7;
}

#costComparer {
    width: 300px;
    float: left; 
}

#costComparer input {
    width: 100px; 
}

#result {
    width: 450px;
    float:right;  
}


#chart_div{
    display: none; 
    float: left;
    margin: 0px; 
    padding: 0px; 
}

.spacer {
    margin: 0px; 
    padding: 0px;
}

And here's the relevant HTML code:

<body>
<div id="cccontainer">
        <form id="costComparer" name="pricesForm">
            <table>
                <!-- my table --> 
            </table>                
        </form>

        <div id="result"></div>

    <div id="chart_div" style="width:400px; height:250px;"></div>
        <div class="spacer" style="clear: both;"></div>
</div>
</body>

Answer №1

The container in blue is too tall at the moment. Adjust it to a height of 474 pixels;

cccontainer.animate({height: 474});

Also, check out this

code sample

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

Eliminating the nested API call within a loop

After making an API call to retrieve a set of data such as a list of users, I noticed that I am implementing a for loop and within it, I am making another API call to obtain each user's profile details based on their ID. I understand that this approac ...

retrieving the value of an object key based on changing information

console.log(x, obj.fares) //return undefined output adultFare Object {adultFare: "9.00", childFare: null, seniorCitizenFare: null, disabledFare: null,} How do I retrieve the adultFare value from the object? Is looping through the keys necessary? I expec ...

Problems with Emulating Chrome | Using Media Queries

Currently, I am in the midst of testing my responsive website and I have encountered an issue with the Chrome emulator. When I select a specific device like "iPhone 6", the responsive views are not displaying correctly. Instead, unsightly scroll bars appea ...

Emphasize entries in an index that match the currently visible content as you scroll

I have a table of contents in my HTML page with the CSS attribute position: fixed;. I want to emphasize the current reading position by highlighting it (bold or italics) as I scroll down the page. | yada yada yada ... 1. Secti ...

Is it possible to convert PDF documents to HTML using languages such as C, C++, or Java?

My current project involves annotating HTML files using Javascript, and I need to convert PDF files into HTML files specifically for the IOS platform. While I have had some success in annotating HTML pages, I am unsure how to go about converting PDF to H ...

What is the most effective way to retrieve specific data from this object using JavaScript?

I attempted to retrieve the number of hashtags used at a specific time using the Twitter API and an npm module called hashtag-count. Below is the program and the generated results object: var HashtagCount = require("hashtag-count") require('dotenv&ap ...

Locate items that possess identical property values and append them to a new array as a property

I am dealing with an array containing objects that have a specific property called "operationGroup" with the sub-property "groupId". Here is an example of the array structure: [{ operation: 11111, operationGroup: null }, { operation: 22222, ...

Unlimited scrolling gallery with multiple rows

I am looking for a way to create a multi-row infinite loop scrolling gallery using html, css, and javascript. Can anyone help me with this? ...

Modifying Form Action with Jquery

Within a form, I have two buttons that need to redirect to different pages when clicked. Button 1 should load page 1 and button 2 should load page 2. While I know how to achieve this using JavaScript, I am unsure of how to do it with jQuery. Can anyone p ...

Can someone show me how to implement arrow functions within React components?

I am facing an issue while working on a node and react project. Whenever I use an arrow function, it shows an error stating that the function is not defined. Despite trying various tutorials and guides, I am unable to resolve this issue. Below is the snipp ...

Struggling to concatenate array dynamically in Vue using ajax request

I am working on a Vue instance that fetches objects from a REST endpoint and showcases them on a web page. Most parts of the functionality work smoothly like filtering, however, there is an issue when attempting to add new objects by requesting a new "page ...

Is it possible to spread an empty array in JavaScript?

Whenever I run the code below, I encounter the error message Uncaught SyntaxError: expected expression, got '...': [1,2,3, (true ? 4 : ...[])] I'm wondering if spreading an empty array in that manner is allowed? ...

Unable to insert a JSON object into an Array

This might appear to be a duplicate, but it's not. None of the solutions I've tried have worked. Within my angular module, I have a list: this.checkedInterviews = [] Followed by a function that does the following: var interviewModel = { ...

Establishing a Next.js API endpoint at the root level

I have a webpage located at URL root, which has been developed using React. Now, I am looking to create an API endpoint on the root as well. `http://localhost:3000/` > directs to the React page `http://localhost:3000/foo` > leads to the Next API end ...

Display or Conceal a DIV depending on a PHP jQuery variable

Is there a way for me to Hide/Show a DIV based on a Variable? Here is what I currently have. The variable is posted into an INPUT <input type="text" id="showhidediv" name="showhidediv" value="<?php echo $ta; ?>"> This is the jQuery code I am ...

I'm having trouble with my code - I suspect the issue might be related to the header() function

When I execute the following code, it resets the form and keeps me on the same page. I am aiming for it to redirect to home.php after a successful login. I believe there is an issue with my header() I have experimented with different approaches and have ...

Ways to assign a CSS class specifically for images

.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...

Spin the object around the z-axis, with the point serving as the center of rotation

I have a unique challenge with positioning a HUD object on the front of a tube in Three.js. The HUD needs to align itself based on a vector point, always facing towards the high side of that point, regardless of the direction and position of the tube. To b ...

Looking for a replacement for EO.Pdf to convert HTML to PDF in C#? Check out wkhtmltopdf!

Currently, I am in the process of creating an HTML catalog for movies, with plans to convert it into a PDF format. While using EO.Pdf initially showed promise with a small test sample, issues arose when attempting to run it against the entire list of movie ...

jinja2.exceptions.UndefinedError: The variable 'participant' has not been defined

I am currently in the process of developing a video chat web application using Twilio, and I have been following a tutorial on how to build the application: . However, I keep encountering an error mentioned in the title. It seems like I am trying to access ...