I have developed three child components for the main content area (excluding the header)
However, one of the components is not responsive.
Below is the code snippet:
<div className="row" style={{marginTop:'30px',}}>
<div className="col-sm-12 col-md-12 col-lg-12">
<div className="col-sm-3 col-md-3 col-lg-3" style={{display:'-webkit-inline-box', padding:'0px',}}>
<label style={{backgroundColor: '#ffffff',margin: '5px 10px 5px 5px', position:'relative', float:'left',}} htmlFor="Airport_List">Airport :</label>
<select value={this.state.airport} onChange={this.handleAirportChange} className="form-control" style={{width:'140px'}}>
<option value="London">London</option>
<option value="Houston">Houston</option>
<option value="California">California</option>
<option value="New Delhi">New Delhi</option>
<option value="Moscow">Moscow</option>
</select>
</div>
<div className="col-sm-3 col-md-3 col-lg-3" style={{display:'-webkit-inline-box', padding:'0px',}}>
<span className="fa fa-plane" style={{padding:'5px',fontSize:'20px',}}></span>
<label style={{backgroundColor: '#ffffff',margin: '5px 10px 5px 5px',}} htmlFor="Flight No">Flight :</label>
<input style={{
width:'150px',
margin: '0',
outline: '0',
border: '1px solid #e6ecf0',
padding:'5px',
borderRadius: '3px',backgroundColor:'#ffffff',color: 'rgb(158, 158, 158)',}} onChange={this.handleFlightChange} type="text" id="flightNo" name="flight_no" className="form__input" placeholder="Flight NO" required/>
</div>
<div className="col-sm-3 col-md-3 col-lg-3">
<div style={{float:'right', display:'-webkit-inline-box',margin:'5px',}}>
<label style={{backgroundColor: '#ffffff',margin: '5px 6px 5px 5px',}} htmlFor="Date">Date :</label>
<div className='input-group date' id='datetimepicker8' style={{left:'12px',}}>
<DateTimePicker
onChange={this.onDateChange}
value={this.state.date}
minDate={new Date()}
name="datetime"
/>
</div>
</div>
</div>
<div className="col-sm-2 col-md-2 col-lg-2">
<Button variant="contained" color="primary" style={{width:'100px', fontSize:'12px'}} onClick={this.handleSubmit}>
Fetch
</Button>
</div>
<div className="col-sm-1 col-md-1 col-lg-1">
<div style={{position:'relative', bottom: '10px',}}>
<Fab color={this.state.color} onClick={()=>this.RecordAudio(this.state.color)}>
{this.state.icon}
</Fab>
</div>
</div>
</div>
The Date component uses react-datetime-picker (Link)
In full-screen mode, it appears like this
https://i.sstatic.net/epfw1.png
But when I reduce the browser screen size, it looks like this :
https://i.sstatic.net/5oX6g.png
This issue has never arisen before.