Calculator app with React, Regular expresion

Community feedback

• 

  Sean Red•635

  @seanred360Posted over 2 years ago

  I added scrolling to the screen part of your calculator app. You can see my changes here https://github.com/mvelardeq/calculator-app/pulls and merge the changes if you wish.

  You need to add these CSS rules to achieve the desired effect.

  .screenSection {
    width: 100%;
    height: 117px;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 1rem;
    border-radius: 0.4rem;
    font-size: 1.7rem;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  .screenSection p {
    width: 100%;
    height: 50px;
    word-wrap: break-word;
  }
  

  The important part is we want the <p> tag to have word-wrap: break-word so that the number will break without using spaces between numbers. We also need to set a fixed height on <p> and set the overflow-y: scroll on the .screenSSection. This means that the numbers are fixed at 50px and when it gets bigger than 50px we want to have a scroll bar.

  Marked as helpful

  0

  ---

  

  Martin•450

  @mvelardeqPosted over 2 years ago

  @seanred360 thanks for your tips, i accepted your pull request

  0