Solution 1 :

You can set a height to the dropdown container and make it scroll using overflow-y: auto;

Problem :

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.

<!-- Search Section Begin -->
<section class="search-section spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <div class="section-title">
                    <h4>Where would you rather live?</h4>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="change-btn">
                    <div class="cb-item">
                        <label for="cb-rent" class="active">
                            For Rent
                            <input type="radio" id="cb-rent">
                        </label>
                    </div>
                    <div class="cb-item">
                        <label for="cb-sale">
                            For Sale
                            <input type="radio" id="cb-sale">
                        </label>
                    </div>
                </div>
            </div>
        </div>
       <div class="search-form-content">
            <form action="{% url 'search' %}" class="filter-form">
            <div>
                <select class="sm-width">
                    <option value="">Chose The City</option>
                </select>
                </div>
                <div >
                <select class="sm-width" name='state'>
                   <option >Location</option>
                    {% for key, value in state_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='property_status' >
                    <option >Property Status</option>
                    {% for key, value in property_status_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='property_type'>
                    <option >Property Type</option>
                    {% for key, value in property_type_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='bedroom'>
                    <option selected='true' disabled="disabled">No Of Bedrooms</option>
                     {% for key, value in bedroom_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='bathroom'>
                    <option selected='true' disabled="disabled">No Of Bathrooms</option>
                    {% for key, value in bathroom_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div class="room-size-range-wrap sm-width">
                    <div class="price-text">
                        <label for="roomsizeRange">Size:</label>
                        <input type="text" id="roomsizeRange" readonly>
                    </div>
                    <div id="roomsize-range" class="slider"></div>
                </div>
                <div class="price-range-wrap sm-width">
                    <div class="price-text">
                        <label for="priceRange">Price:</label>
                        <input type="text" id="priceRange" readonly>
                    </div>
                    <div id="price-range" class="slider"></div>
                </div>
                <button type="button" class="search-btn sm-width">Search</button>
            </form>
        </div>

My views code used for displaying information in my index page

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)

Image of the section section I am talking about.enter image description here

For the choices.py imported in the views, the dictionary of items used is shown below

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'
}

Comments

Comment posted by Ahed Kabalan

Have you tried add height and overflow-y: scroll to select element?

Comment posted by learningtoanimate

You really should add a code snippet to your question rather than a screenshot.

Comment posted by Achebe Peter

I have added the code to the project

By