Reputation: 491

How to move a css button?

I have created two css button and want to move them below the heading forecast customer activity. I used css coding with some styles, so the code may look bigger. Please spend some time and give me a solution. I'm sharing my code below.

<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>
<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>

I'm getting the result as:

Please help me to move the buttons below the heading forecast customer activity.

I want the result as:

Upvotes: 2

Answers (4)

User1493

Reputation: 491

I myself got the answer, thanks to all those who tried to help me. I'm sharing the correct code with which I got the needed result.

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

 <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>

<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>
</div>

<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(0).y(25).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>
</html>

and I got the result as:

Upvotes: 1

D. Schreier

Reputation: 1788

You can't really "move" a button with CSS without edit HTML code, but you can display it on the bottom with use

position: absolute

and play with

margin-top: XXpx;

Upvotes: 0

Andrew Birks

Reputation: 890

<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>

Upvotes: 0

swathis

Reputation: 366

The div with id pieChart is closed at the wrong location. If you close it after the </head> and before starting the <body> tag, you can get the expected result.

Upvotes: 1

How to move a css button?

Answers (4)

Related Questions