Having issues with a React form that includes an image gallery and input fields.
import React, { Component } from 'react';
import ImageGallery from 'react-image-gallery';
import { Container, Row, Col, InputGroup, Button, FormControl, Form } from 'react-bootstrap';
const images = [
{
original: '/assets/images/products/colgantes.png',
thumbnail: '/assets/images/products/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71121e1d16101f05140231415f4344095f011f16">[email protected]</a>',
},
{
original: '/assets/images/products/corazones.png',
thumbnail: '/assets/images/products/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60030f12011a0f0e051320504e5255184e100e07">[email protected]</a>',
},
{
original: '/assets/images/products/take-me-to-the-beach.png',
thumbnail: '/assets/images/products/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9aeefbf1ffb7f7ffb7eef5b7eef2ffb7f8fffbf9f2daaab4a8afe2b4eaf4fd">[email protected]</a>',
},
];
class DetailedProduct extends Component {
render() {
return (
<>
<Container fluid>
<Row >
<Col md={{ span: 4, offset: 3 }} sm={{ span: 12, offset: 0}} >
<ImageGallery
items={images}
showNav=""
showFullscreenButton=""
showBullets=""
showPlayButton=""
thumbnailPosition="left"
/>
</Col>
<Col md={3} sm={12} className="text-xs-center text-md-left" >
<h1>Product</h1>
<h3>$500</h3>
<p>Lorem Ipsum is simply dummy text from the printing and typeseting industrys</p>
<Form>
<Row >
<Col sm={12} md={8} >
<Form.Group controlId="color" >
<Form.Label>Color</Form.Label>
<Form.Control as="select" custom>
<option>Rojo</option>
<option>Negro</option>
<option>Azul</option>
</Form.Control>
</Form.Group>
</Col>
<Col sm={12} md={4} className="inline-block">
<Form.Group controlId="cantidad" >
<Form.Label>Cantidad</Form.Label>
<InputGroup >
<InputGroup.Prepend>
<Button variant="outline-secondary" >+</Button>
</InputGroup.Prepend>
<FormControl
placeholder="1"
aria-label="quantity"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button variant="outline-secondary" >-</Button>
</InputGroup.Append>
</InputGroup>
</Form.Group>
</Col>
</Row>
</Form>
</Col>
</Row>
</Container>
</>
);
}
}
export default DetailedProduct;
The issue arises when resizing the browser window, causing the buttons in the input field to move separately to different rows, breaking the structure. Attempts to adjust CSS for the form group have not been successful in keeping them together consistently. The desired outcome should resemble this: