CODEWITHSUNDEEP
javascripthtmlcss
Skanda Suresh
Skanda Suresh

Reputation: 123

How to have a div text box scroll as its content overflows

I'm making a calculator using CSS/HTML/JavaScript. When a user is entering a number or expression that is too big for the display, I would like the display to scroll sideways, so the most recent input is always showing. Right now, all that happens is the scroll bar pops up but stays in the leftmost position.

I have included a full example in this JSFiddle. I have also included the relevant CSS and HTML snippets below.

.calculator__display {
  background-color: #222222;
  color: #fff;
  font-size: 1.714285714em;
  padding: 0.5em 0.75em;
  text-align: right;
  overflow-x: auto;
}

<div class="calculator__display">0</div>

I want behavior similar to the google search bar. As the content overflows, the search bar adjusts automatically. I am open to solutions using HTML, CSS, and/or vanilla javascript.

Thanks for the help!

Upvotes: 0

Views: 110

Answers (1)

crimson589
crimson589

Reputation: 1306

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target;
    const displayNum = display.textContent;
    display.textContent = displayNum + key.textContent;
    display.scrollLeft = display.scrollWidth; //add this to scroll to the end
  }
});

Upvotes: 1

Related Questions