Tips for relocating a CSS button

I have designed two buttons using css and I am looking to align them below the title "forecast customer activity". Due to extensive styling in css, the code might appear lengthy. Requesting assistance with a solution after reviewing the following code snippet.

<div class="x_content" style="margin: 0px 0px 0px 0px;color:black;width:300px;height:300px;background:#ffffff;border:1px solid black;">
<div id="pieChart" style="margin: 20px 0px 0px 20px;">Forecast Customer Activity

<head>
<style>
.dropbtn {
background-color: #ffffff;
color: black;
padding: 4px;
font-size: 10px;
border: box;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
 color: black;
padding: 4px 4px;
text-decoration: none;
display: block;
}


.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
<div class="dropdown-content">
<a href="#"class="btn btn-secondary" type="button"  id="Voice">Voice</a>
<a href="#"class="btn btn-secondary" type="button"  id="Data">Data</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
<div class="dropdown-content">
<a href="#"class="btn btn-secondary" type="button"  id="s4">0-4</a>
<a href="#"class="btn btn-secondary" type="button"  id="s408">4-8</a>
<a href="#"class="btn btn-secondary" type="button"  id="s812">8-12</a>
<a href="#"class="btn btn-secondary" type="button"  id="s1216">12-16</a>
<a href="#"class="btn btn-secondary" type="button"  id="s1620">16-20</a>
<a href="#"class="btn btn-secondary" type="button"  id="s2024">20-24</a>
</div>
</div>
</body>


<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="https://dc-  js.github.io/dc.js/js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript">


var Chart = dc.pieChart("#pieChart");
d3.csv("data/Forecast_Customer_Activity.csv", function(error, experiments) {

var ndx = crossfilter(experiments),
Age_GrpDimension = ndx.dimension(function (d) { return d.Age_Grp;}),
Age_GrpGroup = Age_GrpDimension.group().reduceSum(function (d) {return d.usage;});
usage_cat = ndx.dimension(function (d) { return d.Usage_category;}),
timewindow = ndx.dimension(function (d) { return d.Timewindow;}),

Chart
.width(270)
.height(120)
.slicesCap(5)
.colors(d3.scale.ordinal().range(["#458dd1","#cc7e30","#a39d97","#FFDA33","#0f63bc","#E51F30"]))
.dimension(Age_GrpDimension)
.group(Age_GrpGroup)
.legend(dc.legend().x(-5).y(5).itemHeight(10).gap(2)) 

.on('pretransition', function(chart) {
    chart.selectAll('text.pie-slice').text(function(d) {
        return  Math.round(dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100)*10)/10+ '%';
    })
});

Chart.render();
});

d3.select('#Voice').on('click', function(){
usage_cat.filter("Voice");
dc.redrawAll();
});

d3.select('#Data').on('click', function(){
usage_cat.filter("Data");
dc.redrawAll();
});

d3.select('#s4').on('click', function(){
timewindow.filter("00-04");
dc.redrawAll();
});
d3.select('#s408').on('click', function(){
timewindow.filter("04-08");
dc.redrawAll();
});
d3.select('#s812').on('click', function(){
timewindow.filter("08-12");
dc.redrawAll();
});
d3.select('#s1216').on('click', function(){
timewindow.filter("12-16");
dc.redrawAll();
});
d3.select('#s1620').on('click', function(){
timewindow.filter("16-20");
dc.redrawAll();
});
d3.select('#s2024').on('click', function(){
timewindow.filter("20-24");
dc.redrawAll();
});

</script>

</div>
</body>

Current output is displayed here:

https://i.stack.imgur.com/bvSIv.png

If you can guide me on how to position the buttons under the heading "forecast customer activity", it would be greatly appreciated.

Expected outcome should resemble:

https://i.stack.imgur.com/onnLG.png

javascripthtmlcss

Answer №1

An error has been detected with the closing of the div element with id pieChart. For correct functionality, it should be closed after the <head> section and before the <body> tag.

Answer №2

After working through it on my own, I finally found the solution to my problem. Huge thanks to everyone who offered their assistance along the way. Here is the correct code that led me to the desired outcome:

<html lang="en>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css"/>

<div class="x_content" style="margin: 0px 0px 0px 0px;color:black;width:250px;height:170px;background:#ffffff;border:1px solid black;">
    <div id="pieChart" style="margin: 0px 0px 0px 20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Forecast Customer Activity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
    
    <head>
        <style>
            .dropbtn {
                background-color: #ffffff;
                color: black;
                padding: 4px;
                font-size: 10px;
                border: box;
                cursor: pointer;
            }

            .dropdown {
                position: relative;
                display: inline-block;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 60px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            }

            .dropdown-content a {
                color: black;
                padding: 4px 4px;
                text-decoration: none;
                display: block;
            }

            .dropdown-content a:hover {
                background-color: #f1f1f1;
            }

            .dropdown:hover .dropdown-content {
                display: block;
            }

            .dropdown:hover .dropbtn {
                background-color: #3e8e41;
            }
        </style>
    </head>
</div>

[...]

Upon implementation of this code, here is the visual result I achieved:

https://i.stack.imgur.com/naATC.png

Answer №3

<style>
  .dropbtn {
    background-color: #ffffff;
    color: black;
    padding: 4px;
    font-size: 10px;
    border: box;
    cursor: pointer;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 60px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  }
  .dropdown-content a {
    color: black;
    padding: 4px 4px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content a:hover {
    background-color: #f1f1f1
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }
  .button-wrapper {
    background: green;
    float: left: width: 100%;
  }
</style>

<body>

  <div class="x_content" style="margin: 0px 0px 0px 0px;color:black;width:300px;height:300px;background:#ffffff;border:1px solid black;">
    <div id="pieChart" style="margin: 20px 0px 0px 20px;">

      <h1>Forecast Customer Activity</h1>
      <div class="button-wrapper">
        <div class="dropdown">
          <button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
          <div class="dropdown-content">
            <a href="#" class="btn btn-secondary" type="button" id="Voice">Voice</a>
            <a href="#" class="btn btn-secondary" type="button" id="Data">Data</a>
          </div>
        </div>

        <div class="dropdown">
          <button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
          <div class="dropdown-content">
            <a href="#" class="btn btn-secondary" type="button" id="s4">0-4</a>
            <a href="#" class="btn btn-secondary" type="button" id="s408">4-8</a>
            <a href="#" class="btn btn-secondary" type="button" id="s812">8-12</a>
            <a href="#" class="btn btn-secondary" type="button" id="s1216">12-16</a>
            <a href="#" class="btn btn-secondary" type="button" id="s1620">16-20</a>
            <a href="#" class="btn btn-secondary" type="button" id="s2024">20-24</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>


<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="https://dc-  js.github.io/dc.js/js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript">
  var Chart = dc.pieChart("#pieChart");
  d3.csv("data/Forecast_Customer_Activity.csv", function(error, experiments) {

    var ndx = crossfilter(experiments),
      Age_GrpDimension = ndx.dimension(function(d) {
        return d.Age_Grp;
      }),
      Age_GrpGroup = Age_GrpDimension.group().reduceSum(function(d) {
        return d.usage;
      });
    usage_cat = ndx.dimension(function(d) {
        return d.Usage_category;
      }),

      timewindow = ndx.dimension(function(d) {
        return d.Timewindow;
      }),

      Chart
      .width(270)
      .height(120)
      .slicesCap(5)
      .colors(d3.scale.ordinal().range(["#458dd1", "#cc7e30", "#a39d97", "#FFDA33", "#0f63bc", "#E51F30"]))
      .dimension(Age_GrpDimension)
      .group(Age_GrpGroup)
      .legend(dc.legend().x(-5).y(5).itemHeight(10).gap(2))

    .on('pretransition', function(chart) {
      chart.selectAll('text.pie-slice').text(function(d) {
        return Math.round(dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2 * Math.PI) * 100) * 10) / 10 + '%';
      })
    });

    Chart.render();
  });

  d3.select('#Voice').on('click', function() {
    usage_cat.filter("Voice");
    dc.redrawAll();
  });

  d3.select('#Data').on('click', function() {
    usage_cat.filter("Data");
    dc.redrawAll();
  });

  d3.select('#s4').on('click', function() {
    timewindow.filter("00-04");
    dc.redrawAll();
  });
  d3.select('#s408').on('click', function() {
    timewindow.filter("04-08");
    dc.redrawAll();
  });
  d3.select('#s812').on('click', function() {
    timewindow.filter("08-12");
    dc.redrawAll();
  });
  d3.select('#s1216').on('click', function() {
    timewindow.filter("12-16");
    dc.redrawAll();
  });
  d3.select('#s1620').on('click', function() {
    timewindow.filter("16-20");
    dc.redrawAll();
  });
  d3.select('#s2024').on('click', function() {
    timewindow.filter("20-24");
    dc.redrawAll();
  });
</script>

Answer №4

Shifting a button using CSS without modifying the HTML code is not straightforward, but you can position it at the bottom by utilizing

position: absolute

and adjusting

margin-top: XXpx;

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

Eliminate set of dates utilizing a different set of dates

Utilizing the MultipleDatePicker plugin to enable selection of multiple dates within a year. I have incorporated a checkbox feature that, when checked, will automatically mark all Sundays in the calendar. However, an issue arises when unchecking the check ...

javascriptangularjsarraysdatedatepicker

Creating a universally accessible handlebars helper in ExpressJS

I have a basic handlebars helper file located in helpers/handlebars.js: var hbs = require('express-handlebars'); hbs.registerHelper("inc", function(value, options) { return parseInt(value) + 1; }); Unfortunately, I am unable to utilize the ...

javascriptexpresshandlebars.jshelper

What is the correct method for dynamically importing framer-motion in NextJS?

I am currently utilizing framer-motion in my NextJS project. My goal is to import {motion} using Next's dynamic import method. However, I am encountering difficulties as it does not seem to function properly. import { motion } from "framer-motion ...

javascriptnext.jsframer-motiondynamic-import

Sending information from AngularJS to nodeJs/Sequelize

I am currently in the process of developing an e-commerce website using Node.js/Sequelize and AngularJS. For my project, I have organized it into 2 main folders: Client (which houses AngularJS starter files) https://i.stack.imgur.com/0vzsF.png Server ...

javascriptangularjsnode.jsexpresssequelize.js

Utilizing Axios for transmitting an authentication token to the server

I'm just starting out with this project Currently, I am developing a Vue application that connects to a WordPress backend and requires user login. To achieve this, I have implemented the Simple JWT-Login plugin. I've successfully managed to send ...

javascriptvue.jsaxios

What is it about the setTimeout function that allows it to not block other

Why is setTimeout considered non-blocking even though it is synchronous? And on which thread does it run if not the main thread? ...

javascriptnode.jsasync-awaitsettimeoutevent-loop

The resolution of Angular 8 resolver remains unresolved

I tried using console.log in both the constructor and ngOnInit() of Resolver but for some reason, they are not being logged. resolve:{serverResolver:ServerResolverDynamicDataService}}, console.log("ServerResolverDynamicDataService constructor"); console ...

javascriptangulartypescriptangular-ui-routerangular-resolver

Performing a consistent influx of data into a MySQL database using Node.js encounters an issue: "Unable to enqueue Handshake as a Handshake has

I am trying to insert values into a database in a continuous manner. Here is the code I have attempted: var mysql = require("mysql"); const random = require("random"); var con = mysql.createConnection({ host: "xxx", user: "xxx", password: "xxx", ...

javascriptmysqlnode.jsdatabase

Step by step guide on integrating ReactJS into your current node.js backend application

I am currently working on a basic node.js API Setup: | project-name | public | index.html | ... some static js/css | app.js | package.json app.js var express = require('express'), bodyParser = require('body-parser'), ...

javascriptnode.jsreactjsexpress

Center text with font awesome symbols

I'm looking for a way to vertically align text next to my FontAwesome icons without using manual padding. Is there a better method for achieving this? https://i.stack.imgur.com/PWwSJ.jpg <div class="row"> <div id="tb-testimonial" class="tes ...

htmlcssfont-awesome

Error encountered during the prerendering process on Vercel's Next.js build

While trying to compile my website on Vercel, I encountered a pre-rendering error during export. Does anyone know why this is happening and can provide assistance? Here is the link to my GitHub repository where all the code is stored: https://github.com/M ...

javascriptreactjsnext.jsvercel

Unusual Behavior Observed in JavaScript Map Reduce

var t = [-12, 57, 22, 12, -120, -3]; t.map(Math.abs).reduce(function(current, previousResult) { return Math.min(current, previousResult); }); // returns 3 t.map(Math.abs).reduce(Math.min); // returns NaN I'm puzzled as to why the second variant ...

javascriptmapreduce

What is the best way to pass the ng-repeat value to the controller in AngularJS

On my webpage, I am trying to utilize ng-repeat with an array like the one below: var array = [{name: Bill, age: 12, number: 1}, {name: Tyrone, age: 11, number: 2}, {name: Sarah, age: 14, number: 3}]; I want to have a button that, when clicked, sends eit ...

javascripthtmlangularjssubmit

"Learn how to efficiently incorporate data into data-binding in VUE JS with just a

In my data binding, there is a string that reads as follows: bc-men,bc-men-fashion,bc-men-underwear I want to create an input field where I can enter "bc-some-category", click "Add", and have it appended to the end of the list with a comma in front. Her ...

javascriptvue.jsvuejs2

Is there a way to create a flexbox that combines a centered fixed child with a fixed child at the bottom?

I'm trying to create a layout using flexbox that looks like this: | | | | | CENTER FIXED ELEMENT | | | | BOTTOM FIXED ELEMENT | Here is the flexbox CSS I've attempted: .wrapper{ ...

htmlcsslayoutflexbox

Is there a way to change the orientation of the cards so that they move from left to right instead of

I am looking to have my cards displayed from left to right rather than vertically, but I'm struggling to achieve this. I have tried using the float: left property with no success. Below is an example of a single card in my layout. They all follow the ...

htmlcss

Attempting to retrieve a stream buffer from a function

I am currently working on creating a zip file that contains a CSV file and returning it as a buffer from a function. Below is the code snippet I have implemented: const archiver = require('archiver'); const streamBuffers = require("stream-bu ...

javascriptnode.jspromisebufferarchiverjs

What is the best way to send the link's ID to an AngularJS controller?

I have a scenario similar to the following: <a href="#" title="Post 1" id="car1"> Audi car </a> <a href="#" title="Post 1" id="car2"> BMW car </a> How can I pass the ID to the controller? I attempted the following: <a href= ...

javascriptangularjs

Is there a way to streamline the import process for material-ui components?

Is there a shortcut to condense all these imports into one line? As a newcomer to react, I've noticed that every component must be individually imported, especially when it comes to CSS components. Could you provide me with a suggestion on how to st ...

javascriptreactjsimportmaterial-ui

Encountering issues with integrating Sass into Angular 4

Hi there! I recently started a new project in Angular 4 and encountered some issues with the Sass styling. Every time I try to add sass and run the project, I keep getting this error message: body{ h1{ color : red; } } ^ Invalid ...

cssangularsass