You can set a height
to the dropdown container and make it scroll using overflow-y: auto;
Solution 1 :
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.
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