I am working on a project where I have a dropdown combo box for filtering menu. It looks great in desktop, however in responsive, the dropdown menu pops put of the gray search box.
I am not sure how to make it responsive. Any help/advice appreciated. Thanks.
Link to code – https://live.datatables.net/waruwabo/1/edit
Here is my code –
.searchbox {
border-radius: .5rem;
border: 1px solid #ced4da;
background-color: #f0f0f0;
padding: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox">
<p>Name: <select id="dropdown1">
<option value="">Select</option>
<option>Ashton Cox</option>
<option>Brielle Williamson</option>
<option>Cedric Kelly</option>
</select>
</p>
<p>Postion: <select id="dropdown2">
<option value="">Select</option>
<option>Technical Author hghhgjh</option>
<option>Integration Specialist</option>
<option>Javascript Developer</option>
</select>
</p>
<p>Office: <select id="dropdown3">
<option value="">Select</option>
<option>San Francisco county state</option>
<option>New York state and city</option>
<option>Edinburgh Learning Center test</option>
</select>
</p>
<button type="button" id="test">Clear Filters</button>
</div>
>Solution :
You can just add a width of x% and it will never be bigger than the parent div. This does not apply for the options beneath it
.searchbox {
border-radius: .5rem;
border: 1px solid #ced4da;
background-color: #f0f0f0;
padding: 20px;
margin-bottom: 20px;
}
select {
width: 40%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox">
<p>Name: <select id="dropdown1">
<option value="">Select</option>
<option>Ashton Cox</option>
<option>Brielle Williamson</option>
<option>Cedric Kelly</option>
</select>
</p>
<p>Postion: <select id="dropdown2">
<option value="">Select</option>
<option>Technical Author hghhgjh</option>
<option>Integration Specialist</option>
<option>Javascript Developer</option>
</select>
</p>
<p>Office: <select id="dropdown3">
<option value="">Select</option>
<option>San Francisco county state</option>
<option>New York state and city</option>
<option>Edinburgh Learning Center test</option>
</select>
</p>
<button type="button" id="test">Clear Filters</button>
</div>