How do I make my dropwdown menu responsive?

March 6, 2023

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>