Search code examples
javascriptcssreactjsmaterial-uireact-bootstrap

Resizing the Button of ReactBootstrap in ReactJS

I am struggling to stretch the buynow button to the length of the paper box(@material-ui) above, the buynow button using the react-bootstrap,i have seen the raectbootstrap site but couldnt find any usefull info of change the size of the button, any suggestions please

Photo showing the button that need extended till the boarder of top Paper component

-Snippet of code below

 <div style={{ float: "right", paddingRight: "5rem" }}>
        <TableContainer
          className="basket-summary"
          component={Paper}
          style={{ float: "right", top: "0", display: "flex", flexDirection: "column", maxHeight: "9vw", maxWidth: "14vw" }}
        >
          <Table >
            <TableHead>
              <TableRow>
                <TableCell>Summary </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              <tr>
                <td>SubTotal:{totalPrice}</td>
              </tr>

              <tr>
                <td></td>
              </tr>
            </TableBody>
          </Table>
        </TableContainer>
        <ButtonGroup aria-label="quantityofproduct">
          <Button className=" button-block" variant="primary" name="subtract" value="subtract" onClick={() => buyNow(basketItems)}>
            Buy Now
          </Button>
        </ButtonGroup>
      </div>

-CSS formatting

.basket-summary {
    min-height: 15rem;
  min-width: 10rem;
  padding-bottom: 1rem;
  margin-top: 10rem;
}
Solution

  • The button just needs to have a min-width: 100%, which makes it fill the parent width.

    .button-block {
  min-width: 100%;
  width: 100%;
}