I have a delete employee page in my Django project where I get all the names of the employees in the dropdown menu from the database. the main issue is when I run the code the content which is supposed to be shown inside the dropdown menu is shown ouside. the code is as below:
''' {% extends 'app/base.html' %}
{% block para %}
<title>delete employee</title>
<body style="background-color:powderblue;"></body>
<style type="text/css">
label{
width: 200px;
display: inline-block;
margin: 4px;
text-align: left;
font-weight:bold;
}
input{
width: 200px;
display: inline-block;
margin: 4px;
text-align: left;
border-radius: 10px;
}
select{
width: 200px;
display: inline-block;
margin: 4px;
text-align: left;
border-radius: 10px;
}
form{
border-radius: 10px;
background: rgb(155, 206, 219) ;
color: white;
width: 450px;
padding: 4px;
margin:auto;
}
</style>
<form action="" >
<h3 class="text-center text-uppercase"style="color:black; font-weight:bold">delete-employee</h3>
{% csrf_token %}
<label for="" class="text-uppercase">select:</label>
{% for emp in emps %}
<option value="ceo" class="text-uppercase">{{emp.name}}</option>
{% endfor %}
<select name="designation" id="designation">
<option value="associates" selected class="text-uppercase">name</option>
</select><br><br>
<div class="container">
<input type="submit" value="submit" class="text-uppercase text-center">
</div>
</form>
</div>
{% endblock para %}'''