CODEWITHSUNDEEP
css
DVislearning
DVislearning

Reputation: 21

Have Horizontal Scrollbar Appear For Flex Element

I'm trying to build a calculator, and I'm designing the area where the output is displayed.

If the output is longer than the display, I want a horizontal scroll bar to appear, so the user can see all of it.

I also want the characters to appear from right to left as they are entered, like a typical calculator.

#calculator {
  background-color: rgb(0, 0, 0);
  color: white;
  height: 90vh;
  width: 30%;
}

#display {
  border: 2px solid rgba(219, 93, 46, 0.918);
  display: flex;
  height: 11%;
  width: 96%;
  margin: auto;
}

#display-text {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  white-space: nowrap;
  overflow: auto;
  height: 100%;
  width: 100%;
  font-size: 7vh;
}
<div id="App">
  <div id="calculator">
    <div id="calc-header">
      My Calculator
    </div>

    <div id="display">
      <div id="display-text">
        1+2+3-9+3-9+3-9+5*5+8-15+66*3
      </div>
    </div>

    <div id="calc-inputs">
      Buttons will go here
    </div>
  </div>
</div>

Right now, there is no horizontal scrollbar. When I try overflow-x: auto;, same thing.

When I try overflow-x: scroll, I lose the flex-end properties and the characters start showing left to right.

Upvotes: 1

Views: 71

Answers (1)

metaDesign
metaDesign

Reputation: 628

Using JavaScript

Remove justify-content: flex-end; and add overflow-x: scroll; to #display-text

Then you can use JavaScript to make the div scroll all the way to the right by default.

var objDiv = document.getElementById("display-text");
objDiv.scrollLeft = objDiv.scrollWidth;

Using CSS only

Just using CSS this is possible by removing justify-content: flex-end; and add overflow-x: scroll;, flex-direction: row-reverse and direction: ltr; to #display-text

Upvotes: 1

Related Questions