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

The Object filter is experiencing a delay with processing 10,000 items

When an API returns over 10,000 objects in the format of {firstName:'john',lastName:'Cena'}, I am faced with a performance issue. In my parent React component, I make the API call in componentDidMount and pass this object to child compo ...

javascripttypescript

Is there a way to verify if a Backbone.View is actively displayed in the DOM?

Is there a way to determine if a Backbone.View is currently rendered in the DOM, so that I do not need to rerender it? Any suggestions on how this can be achieved? Thanks and regards ...

javascriptdomviewbackbone.js

Unable to set the width for a div element within the bootstrap grid layout

When trying to set the width of a div tag to 100% within a bootstrap grid system (col-lg-3), I noticed that the div ends up taking the full width of the browser instead of just 100% of its parent(col-lg-3). .sidebar { color: #fff; f ...

htmlcss

When attempting to add an image to a table, I struggle to do so without disrupting the alignment of the surrounding cells

I'm having an issue with adding an image to my table. Whenever I place the img tag between the <td> tags, the content in the neighboring cell behaves as if there are <br> tags above it. I attempted to use display:inline-block, but it had ...

htmlcss

What causes old data to linger in component and how to effectively clear it out

Fetching data from NGXS state involves multiple steps. First, we define the state with a default list and loading indicator: @State<CollectionsStateModel>({ name: 'collections', defaults: { collectionList: [], (...), isListLoading: true, ...

javascriptangularngxs

Why am I seeing a blank page?

I've recently started learning React and I'm facing an issue where the header and paragraph are not showing up on my page. Here's a snippet from my script tag with the type set to text/babel: var myElements = React.createClass({ render: ...

javascriptreactjs

Having trouble with understanding the usage of "this" in nodejs/js when using it after a callback function within setTimeout

It's quite peculiar. Here is the code snippet that I am having trouble with: var client = { init: function () { this.connect(); return this; }, connect: function () { var clientObj = this; this.socket = ...

javascriptnode.js

Troubleshooting problem with image loading in AngularJS using ng-repeat

Recently delving into using AngularJS in my projects has presented a rather significant issue when utilizing ngRepeat to load thumbnails from a dynamic array into a DIV. While I won't dive deep into the entire application's details here, let me ...

javascriptangularjsangularjs-directiveangularjs-ng-repeatimage-loading

Laravel is unable to interpret formData

I've been on a quest to find answers, but so far I'm coming up empty. I'm trying to send file input to a Laravel controller via Ajax, but it seems like the controller can't read the data at all. Here is my Ajax code: let fd = n ...

javascriptphpjqueryajaxlaravel

Warning: An unexpected issue occurred due to an invalid integer being entered as Not a Number (NaN

I've encountered an issue trying to pass data into the "amount" parameter. From the client, I'm sending the "price" to the server successfully. Upon checking the console output, I see the correct information is being received. The typeof check ...

javascriptnode.jsjsonexpressstripe-payments

Using AngularJS to implement modules in a single controller

Currently, I am in the process of learning Angularjs and have two separate template pages - one for login (login.html) and another for the main content (index.html). To incorporate a chart into my index.html page, I am utilizing a directive from here. Th ...

javascriptangularjs

Using the `implode()` function in PHP to concatenate values for a MySQL query

Recently, I ran into an issue while using the implode function in PHP. <?php $insertValues[] = "(default,'{$y}', '{$p}', '{$o}', '{$i}', '{$u}','AMM-40','test')"; $query_status = ...

phpmysqlhtml

Having trouble loading script files with JSDOM in NodeJS?

I'm currently experimenting with loading an HTML page in jsdom to generate graphs, but I'm facing challenges in getting the JavaScript to execute. Here's the HTML page I'm trying to load, which simply renders a basic graph: <html&g ...

javascriptjquerynode.jsjsdom

Scrollable horizontal card list using Bootstrap

Looking to design a unique layout featuring a horizontal list of cards where 3 cards are displayed simultaneously, with the ability to horizontally scroll through the rest, like this: https://i.sstatic.net/KgX27.png While achieving this using CSS is stra ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Is it possible to utilize localStorage.getItem within Next.js while using redux toolkit?

While I successfully used localStorage.setItem() inside the redux toolkit slice, I encountered an issue when trying to use localStorage.getItem(). The error message "local storage is not defined" popped up, preventing me from accessing the stored data. imp ...

javascriptreactjsnext.jslocal-storageredux-toolkit

What is the best way to move between websites or pages without having to reload the current page using a selector?

Have you ever wondered how to create a webpage where users can navigate to other websites or pages without seeing their address, simply by selecting from a drop-down menu? Take a look at this example. Another similar example can be found here. When visit ...

javascriptphphtmlcssajax

Retrieve the processed data from a file using node.js

I have successfully read and parsed my file, however I am facing an issue with retrieving the output string. I want to access this string from a variable assigned to it on the client side. Despite using async series to handle callback functions effective ...

javascriptnode.jsasynchronousexpressfs

Java Entity Framework Indexing Tables

I am currently utilizing ASP.Net Core and have implemented EntityFramework to create a controller with views. Specifically, I am in the process of enhancing the Index view to make it dynamic with dropdown selections. I have successfully completed everythin ...

javascriptc#asp.netajax

Ensuring consistency between TypeScript .d.ts and .js files

When working with these definitions: https://github.com/borisyankov/DefinitelyTyped If I am using angularJS 1.3.14, how can I be certain that there is a correct definition for that specific version of Angular? How can I ensure that the DefinitelyTyped *. ...

javascriptangularjstypescript

The animation for the accordion feature in the iOS Framework7-vue app seems to be moving at

I am encountering issues with the iOS app while developing both android and iOS apps with Framework7-vue. The Android app functions smoothly, but the iOS app is causing trouble. One of the features include a popup functionality with an accordion inside fo ...

javascriptvue.jsaccordionhtml-framework-7