title: How do I make the select tag in my webpage scrollable
body: <p>Code of my Index page. The aim is to make sure the select tags used in the search section of the webpage scrollable. At the moment when I try scrolling through the options in each select tag, the whole webpage moves.</p>
  
  <pre><code>&lt;!-- Search Section Begin --&gt;
  &lt;section class="search-section spad"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-7"&gt;
                  &lt;div class="section-title"&gt;
                      &lt;h4&gt;Where would you rather live?&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-5"&gt;
                  &lt;div class="change-btn"&gt;
                      &lt;div class="cb-item"&gt;
                          &lt;label for="cb-rent" class="active"&gt;
                              For Rent
                              &lt;input type="radio" id="cb-rent"&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="cb-item"&gt;
                          &lt;label for="cb-sale"&gt;
                              For Sale
                              &lt;input type="radio" id="cb-sale"&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
         &lt;div class="search-form-content"&gt;
              &lt;form action="{% url 'search' %}" class="filter-form"&gt;
              &lt;div&gt;
                  &lt;select class="sm-width"&gt;
                      &lt;option value=""&gt;Chose The City&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div &gt;
                  &lt;select class="sm-width" name='state'&gt;
                     &lt;option &gt;Location&lt;/option&gt;
                      {% for key, value in state_choices.items %}
                      &lt;option value="{{ key }}" &gt;{{ value }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                  &lt;select class="sm-width" name='property_status' &gt;
                      &lt;option &gt;Property Status&lt;/option&gt;
                      {% for key, value in property_status_choices.items %}
                      &lt;option value="{{ key }}" &gt;{{ value }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                  &lt;select class="sm-width" name='property_type'&gt;
                      &lt;option &gt;Property Type&lt;/option&gt;
                      {% for key, value in property_type_choices.items %}
                      &lt;option value="{{ key }}" &gt;{{ value }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                  &lt;select class="sm-width" name='bedroom'&gt;
                      &lt;option selected='true' disabled="disabled"&gt;No Of Bedrooms&lt;/option&gt;
                       {% for key, value in bedroom_choices.items %}
                      &lt;option value="{{ key }}" &gt;{{ value }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                  &lt;select class="sm-width" name='bathroom'&gt;
                      &lt;option selected='true' disabled="disabled"&gt;No Of Bathrooms&lt;/option&gt;
                      {% for key, value in bathroom_choices.items %}
                      &lt;option value="{{ key }}" &gt;{{ value }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="room-size-range-wrap sm-width"&gt;
                      &lt;div class="price-text"&gt;
                          &lt;label for="roomsizeRange"&gt;Size:&lt;/label&gt;
                          &lt;input type="text" id="roomsizeRange" readonly&gt;
                      &lt;/div&gt;
                      &lt;div id="roomsize-range" class="slider"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="price-range-wrap sm-width"&gt;
                      &lt;div class="price-text"&gt;
                          &lt;label for="priceRange"&gt;Price:&lt;/label&gt;
                          &lt;input type="text" id="priceRange" readonly&gt;
                      &lt;/div&gt;
                      &lt;div id="price-range" class="slider"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button type="button" class="search-btn sm-width"&gt;Search&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>My views code used for displaying information in my index page</p>
  
  <pre><code>from django.shortcuts import render
  from properties.models import Property
  from properties.choices import bedroom_choices, property_type_choice, 
  property_status_choice, bathroom_choices, state_choices
  
  
  # Create your views here.
  def index(request):
      properties = Property.objects.order_by('-list_date')[:6]
  
      context={
          'properties': properties,
          'bedroom_choices': bedroom_choices,
          'bathroom_choices': bathroom_choices,
          'state_choices': state_choices,
          'property_type_choices':property_type_choice,
          'property_status_choices': property_status_choice,
      }
      return render(request, 'pages/index.html', context)
  </code></pre>
  
  <p>Image of the section section I am talking about.<a href="https://i.stack.imgur.com/wtSgJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wtSgJ.png" alt="enter image description here"></a></p>
  
  <p>For the choices.py imported in the views, the dictionary of items used is shown below</p>
  
  <pre><code>property_status_choice= {
  'Rent': 'Rent',
  'Sale': 'Sale'
  }
  property_type_choice= {
      '1':'All',
      '2':'Apartment',
      '3':'House',
      '4':'Office',
      '5':'Hotel',
      '6':'Restaurent'
  }
  bedroom_choices = {
    '1':1,
    '2':2,
    '3':3,
    '4':4,
    '5':5,
    '6':6,
    '7':7,
    '8':8,
    '9':9,
    '10':10
    }
  bathroom_choices = {
    '1':1,
    '2':2,
    '3':3,
    '4':4,
    '5':5,
    '6':6,
    '7':7,
    '8':8,
    '9':9,
    '10':10
    }
  state_choices = {
      'AK': 'Alaska',
      'AL': 'Alabama',
      'AR': 'Arkansas',
      'AS': 'American Samoa',
      'AZ': 'Arizona',
      'CA': 'California',
      'CO': 'Colorado',
      'CT': 'Connecticut',
      'DC': 'District of Columbia',
      'DE': 'Delaware',
      'FL': 'Florida',
      'GA': 'Georgia',
      'GU': 'Guam',
      'HI': 'Hawaii',
      'IA': 'Iowa',
      'ID': 'Idaho',
      'IL': 'Illinois',
      'IN': 'Indiana',
      'KS': 'Kansas',
      'KY': 'Kentucky',
      'LA': 'Louisiana',
      'MA': 'Massachusetts',
      'MD': 'Maryland',
      'ME': 'Maine',
      'MI': 'Michigan',
      'MN': 'Minnesota',
      'MO': 'Missouri',
      'MP': 'Northern Mariana Islands',
      'MS': 'Mississippi',
      'MT': 'Montana',
      'NA': 'National',
      'NC': 'North Carolina',
      'ND': 'North Dakota',
      'NE': 'Nebraska',
      'NH': 'New Hampshire',
      'NJ': 'New Jersey',
      'NM': 'New Mexico',
      'NV': 'Nevada',
      'NY': 'New York',
      'OH': 'Ohio',
      'OK': 'Oklahoma',
      'OR': 'Oregon',
      'PA': 'Pennsylvania',
      'PR': 'Puerto Rico',
      'RI': 'Rhode Island',
      'SC': 'South Carolina',
      'SD': 'South Dakota',
      'TN': 'Tennessee',
      'TX': 'Texas',
      'UT': 'Utah',
      'VA': 'Virginia',
      'VI': 'Virgin Islands',
      'VT': 'Vermont',
      'WA': 'Washington',
      'WI': 'Wisconsin',
      'WV': 'West Virginia',
      'WY': 'Wyoming'
  }
  </code></pre>