Внедрить фоновый режим с помощью AsyncTask
, который имеет как методы cancel()
, так и isCancelled()
.
Чтобы достичь ожидаемого результата, задайте правильное расстояние между col для всех элементов div внутри каждой строки.
Проблема: перекрытие элементов div, вызывающее проблему выбора математики из выпадающего списка
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="google" content="notranslate">
<title>Title</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom CSS -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
</div>
</div>
<div class="row">
<div class="col-12"><br></div>
</div>
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center">
<div class="container">
<br/><br/><br/>
<div class="container">
<div class="row align-items-center">
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-6">
<div class="row">
<div class="col-1">Math</div>
<div class="col-2"></div>
<div class="col-1">Science</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-2">
Student1
</div>
<div class="col-3">
<div class="row">
<div class="col-6">
<div>
<select name="name_student1_math" id="id_student1_math">
<option value="na">N/A</option>
<option value="1" >1</option>
<option value="2" selected >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</div>
</div>
<div class="col-1"></div>
<div class="col-3">
<div>
<select name="name_student1_science" id="id_student1_science">
<option value="na">N/A</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" selected >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-2">
Student2
</div>
<div class="col-3">
<div class="row">
<div class="col-6">
<div>
<select name="name_student2_math" id="id_student2_math">
<option value="na">N/A</option>
<option value="1" >1</option>
<option value="2" selected >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</div>
</div>
<div class="col-1"></div>
<div class="col-3">
<div>
<select name="name_student2_science" id="id_student2_science">
<option value="na">N/A</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" selected >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Я думаю, что вы даете слишком много отступов, и ваши средства управления выходят за пределы их коробки.
Попробуйте открыть его в Chrome и щелкнуть правой кнопкой мыши на одном из селекторов и выбрать «Осмотреть», чтобы увидеть его в инструментах разработчика, что, вероятно, даст вам лучшее представление о том, в чем заключается проблема.
Вы даете слишком мало места для ваших контролей. Попробуйте изменить некоторые из этих col-1
на col-4
, которые могут помочь.