CODEWITHSUNDEEP
javascripthtmljquerycss
user14226172
user14226172

Reputation:

Change the orientation of the buttons

I am trying to make a quiz app. The question buttons seem to have a vertical orientation, whereas I want them in a horizontal configuration. I am not sure where I might be doing the mistake. I have set the display-inline-block and it still does not seem to work. I have tried changing the orientation of my screen as well. I tried making an array of a number of blocks, but that too didn't seem to work.

function progress(timeleft, timetotal, $element) {
  var progressBarWidth = timeleft * $element.width() / timetotal;
  $element.find('div').animate({
    width: progressBarWidth
  }, 500).html(Math.floor(timeleft / 60) + ":" + timeleft % 60);
  if (timeleft > 0) {
    setTimeout(function() {
      progress(timeleft - 1, timetotal, $element);
    }, 1000);
  }
};

progress(2700, 2700, $('#progressBar'));
body {
  background-color: lightblue;
}

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px;
  /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}


/* Do not take in account */

html {
  padding-top: 30px
}

a.solink {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  background: #f3f5f6;
  color: #cfd6d9;
  border: 1px solid #cfd6d9;
  line-height: 30px;
  text-decoration: none;
  transition: all .3s;
  z-index: 999
}

a.solink::first-letter {
  text-transform: capitalize
}

a.solink:hover {
  color: #428bca
}


/* Create two unequal columns that floats next to each other */

.column {
  float: left;
  padding: 10px;
}

.left {
  width: 75%;
  height: 100%;
}

.right {
  width: 25%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* button */

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 20px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  margin: 2px 2px;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>

<div id="progressBar">
  <div class="bar"></div>
</div>

<body>
  <script src="scripts.js">
  </script>
  <div class="row">
    <div class="column left" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
    <div class="column right" style="background-color:#bbb;">
      <div>
        <p>
          <h2>Questions</h2>
        </p>
      </div>
      <div>
        <button class="button">1</button>
      </div>
      <div>
        <button class="button">2</button>
      </div>
      <div>
        <button class="button">3</button>
      </div>
      <div>
        <button class="button">4</button>
      </div>
      <div>
        <button class="button">5</button>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 566

Answers (1)

altruios
altruios

Reputation: 1073

you want the element in question's css property display to be grid or flex.

flex is easier to work with and better generally for most things.

display:flex;
flex-flow: row nowrap;

here is a link to mdn docs that go over flex stylings:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow

Upvotes: 1

Related Questions