Search code examples
cssstyled-components

When the Copy button changes to Copied then button nearby gets pushed to the right

Copy

Copied

The Copy button on clicked is shifting the View button towards right. I want the word 'Copy' to grow towards the left when it is turned to 'Copied' instead of right so that it doesn't effect the View button.

The following code is how I am approaching this. But then when the text changes the Copied but pushes the View Button to towards the right side and the view button crosses the padding.

/////// CSS ///////

export const Container = styled.div`
  display: grid;
  grid-template-columns: 482px;
  width: 482px;
  height: 300px;
`;

export const SubContainer = styled.div`
  position: relative;
  box-sizing: border-box;
  border: 1px solid grey;
  border-radius: 5px;
  max-height: 300px;
`;

export const Header = styled.div`
  display: grid;
  grid-template-columns: 363px max-content min-content;
  grid-column-gap: 8px;
  grid-template-rows: 22px;
  border-bottom: 1px solid red;
  padding: 12px 16px 8px 16px;
`;

export const Title = styled.div`
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  padding-top: 2px;
  justify-content: center;
`;

export const Button = styled.a`
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
`

/////// React ///////

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      copied: false
    }
  }

  copyToClipboard = () => {
    this.setState({copied: true}, () => {
      setTimeout( () => {
        this.setState({copied: false})
    }, 2000)
    })
  }

  render() {
    return (
      <Container>
        <SubContainer>
          <Header>
              <Title className='title'>Heading</Title>
              <Button
                text={copied ? 'Copied' : 'Copy'}
                onClick={this.copyToClipboard}
              />
              <Button primary text="View"/>
          </Header>
        </SubContainer>
     </Container>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
Solution

  • I was able to fix it by adjusting the grid-template-columns in Header styled component.

    export const Header = styled.div`
  display: grid;
  grid-template-columns: 358px 50px 40px;
  grid-template-rows: 22px;
  border-bottom: 1px solid red;
  padding: 12px 16px 8px 16px;
`;

    By this way the Copy button when expands to copied it doesn't push the View button towards to the right side