Пробел при вертикальной прокрутке таблицы или формы HTML. Потенциально принудительный разрыв страницы?Не проблема ширины - PullRequest
Новая
       17

Пробел при вертикальной прокрутке таблицы или формы HTML. Потенциально принудительный разрыв страницы?Не проблема ширины

0 голосов
/ 24 сентября 2019

Я удалил свой предыдущий вопрос, поскольку он вводил в заблуждение, поскольку я думал, что проблема была в сравнении с тем, что я сейчас думаю.У меня проблемы с пустым пространством при вертикальной прокрутке в мобильном просмотре.Я перепробовал несколько вещей, в том числе поэкспериментировал с окном просмотра и css, и единственное, что, похоже, помогло, это удалить строки из таблицы, чтобы получить ее в определенном размере.Я уверен, что есть какой-то способ обойти это, но я просто не смог понять это.Кажется, это не проблема с шириной таблицы, я пытался изменить это несколько раз, но ничего не помогло.Кажется, что это вынужденный разрыв страницы из-за длины формы по вертикали.Вот HTML-код: 

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="height=device height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
<style>

body {
  font-family: Arial;
  background-color: MidnightBlue;
  color: GhostWhite;
  display: inline-block;
}

.modal {
  width: 100%;
  height: 100%;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: GhostWhite;
  color: Black;
  }

input[type=text], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}
input[type=number], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}
input[type=date], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}

input[type=time], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}

input[type=submit] {
  width: 100%;
  background-color: DarkRed;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}
input[type=radio] {
  width: 50px;
  height: 50px;
}
input[type=button] {
  width: 150px;
  height: 50px;
  font-size: 30px;
  display: block;
  margin-left: auto;
}

#Address th, #Address td {
  border: 2px solid #ddd;
  font-size: 60px;
  font-weight: bold;
  width: 20%;
  text-align: center;
  }

#Inspection {
  table-layout: auto;
  height: 100%;
  }

#Inspection th, #Inspection td {
  border: 2px solid #ddd;
  }

#Inspection th {
    font-size: 30px;
    text-align: left;
  }

#Inspection td {
   font-size: 15px;
   text-align: center;
  }

#customerForm {
  font-size: 2em;
  font-weight: Bold;
  }
  ::placeholder {
  font-size: 1em;
  }

</style>
<body>
<center><h1><big><big>DRIVER VEHICLE INSPECTION REPORT</big></big></h1>
<h5>AS REQUIRED BY THE D.O.T. FEDERAL MOTOR CARRIER SAFETY REGULATIONS</h5></center><br>
<form id="customerForm" action="/action_page.php">
<div class="container">
    <label for="carrier">Carrier:</label>
    <select id="carrier" name="carrier" required>
      <option value="My Company">My Company</option>   
      </select><br>
  <table id="Address" width="100%">
  <tr>Select Your Terminal Location:</tr>
  <tr>
  <th>PDX</th>
  <th>EUG</th>
  <th>SEA</th>
  <th>SFO</th>
  </tr>
  <tr>
  <td><input type="radio" id="PDX" name="Address" value="PDX"required></td>
  <td><input type="radio" id="EUG" name="Address" value="EUG"required></td>
  <td><input type="radio" id="SEA" name="Address" value="SEA"required></td>
  <td><input type="radio" id="SFO" name="Address" value="SFO"required></td>
  </tr>
  </table><br>
      <label for="Driver name">Driver Performing Inspection:</label>
  <input type="text" id="dname" name="drivername" placeholder="Your full name" required><br>
  <label for="Driver Employee ID number">Driver's Employee Number:</label><br>
  <input type="number" id="dnum" name="drivernumber" placeholder="Your employee number" required><br><br>
  <label for="Date">Date Performed:</label><br>
  <input type="date" id="date" name="date" required><br><br>
  <label for="Time">Time Performed:</label><br>
  <input type="time" id="time" name="time" value="now" required><br><br>
  <label for="Tractor/Truck#">Tractor / Truck #:</label><br>
  <input type="number" id="tractor/truck" name="tractor/truck" placeholder="Your vehicle number" required><br><br>
  <label for="Odometer">Odometer Reading:</label><br>
  <input type="number" id="odom" name="odometer reading" placeholder="Vehicle odometer reading" required><br><br>
  <center><h3>Tractor / Truck Inspection:</h3></center>
  <table id="Inspection" width="100%">
  <tr>
  <th>&nbsp;</th>
  <th>Satisfactory</th>
  <th>Unsatisfactory</th>
  </tr>
  <tr>
  <th><label for="Air Compressor">Air Compressor</label></th>
  <td><input type="radio" id="air compressor" name="AirCompressor" value="Sat" required></td>
  <td><input type="radio" id="air compressor2" name="AirCompressor" value="Unsat" required></td>
  </tr>
  <tr>
  <th><label for="Air Lines">Air Lines</label></th>
  <td><input type="radio" id="air lines" name="AirLines" value="Sat" required></td>
  <td><input type="radio" id="air lines2" name="AirLines" value="Unsat" required></td>
  </tr>
  <tr>
  <th><label for="Battery">Battery</label></th>
  <td><input type="radio" id="Battery" name="Battery" value="Sat" required></td>
  <td><input type="radio" id="Battery2" name="Battery" value="Unsat" required></td>
  </tr>
  <tr>
  <th><label for="Belts and Hoses">Belts and Hoses</label></th>
  <td><input type="radio" id="Belts and Hoses" name="BeltsandHoses" value="Sat" required></td>
  <td><input type="radio" id="Belts and Hoses2" name="BeltsandHoses" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Body">Body</label></th>
  <td><input type="radio" id="Body" name="Body" value="Sat"required></td>
  <td><input type="radio" id="Body2" name="Body" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Brake Accessories">Brake Accessories</label></th>
  <td><input type="radio" id="Brake Accessories" name="BrakeAccessories" value="Sat"required></td>
  <td><input type="radio" id="Brake Accessories2" name="BrakeAccessories" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Brakes, Parking">Brakes, Parking</label></th>
  <td><input type="radio" id="Brakes, Parking" name="BrakesParking" value="Sat"required></td>
  <td><input type="radio" id="Brakes, Parking2" name="BrakesParking" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Brakes, Service">Brakes, Service</label></th>
  <td><input type="radio" id="Brakes, Service" name="BrakesService" value="Sat"required></td>
  <td><input type="radio" id="Brakes, Service2" name="BrakesService" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Clutch">Clutch</label></th>
  <td><input type="radio" id="Clutch" name="Clutch" value="Sat"required></td>
  <td><input type="radio" id="Clutch2" name="Clutch" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Coupling Devices">Coupling Devices</label></th>
  <td><input type="radio" id="Coupling Devices" name="CouplingDevices" value="Sat"required></td>
  <td><input type="radio" id="Coupling Devices2" name="CouplingDevices" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Defroster/Heater">Defroster/Heater</label></th>
  <td><input type="radio" id="Defroster/Heater" name="DefrosterHeater" value="Sat"required></td>
  <td><input type="radio" id="Defroster/Heater2" name="DefrosterHeater" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Drive Line">Drive Line</label></th>
  <td><input type="radio" id="Drive Line" name="DriveLine" value="Sat"required></td>
  <td><input type="radio" id="Drive Line2" name="DriveLine" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Engine">Engine</label></th>
  <td><input type="radio" id="Engine" name="Engine" value="Sat"required></td>
  <td><input type="radio" id="Engine2" name="Engine" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Exhaust">Exhaust</label></th>
  <td><input type="radio" id="Exhaust" name="Exhaust" value="Sat"required></td>
  <td><input type="radio" id="Exhaust2" name="Exhaust" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Fifth Wheel">Fifth Wheel</label></th>
  <td><input type="radio" id="Fifth Wheel" name="FifthWheel" value="Sat"required></td>
  <td><input type="radio" id="Fifth Wheel2" name="FifthWheel" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Fluid Levels">Fluid Levels</label></th>
  <td><input type="radio" id="Fluid Levels" name="FluidLevels" value="Sat"required></td>
  <td><input type="radio" id="Fluid Levels2" name="FluidLevels" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Frame and Assembly">Frame and Assembly</label></th>
  <td><input type="radio" id="Frame and Assembly" name="FrameandAssembly" value="Sat"required></td>
  <td><input type="radio" id="Frame and Assembly2" name="FrameandAssembly" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Front Axle">Front Axle</label></th>
  <td><input type="radio" id="Front Axle" name="FrontAxle" value="Sat"required></td>
  <td><input type="radio" id="Front Axle2" name="FrontAxle" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Fuel Tanks">Fuel Tanks</label></th>
  <td><input type="radio" id="Fuel Tanks" name="FuelTanks" value="Sat"required></td>
  <td><input type="radio" id="Fuel Tanks2" name="FuelTanks" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Horn">Horn</label></th>
  <td><input type="radio" id="Horn" name="Horn" value="Sat"required></td>
  <td><input type="radio" id="Horn2" name="Horn" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Lights">Lights -<br>&nbsp;&nbsp;&nbsp;&nbsp;Head/Stop<br>&nbsp;&nbsp;&nbsp;&nbsp;Tail/Dash<br>&nbsp;&nbsp;&nbsp;&nbsp;Turn Indicators<br>&nbsp;&nbsp;&nbsp;&nbsp;Clearance/Marker</label></th>
  <td><input type="radio" id="Lights" name="Lights" value="Sat"required></td>
  <td><input type="radio" id="Lights2" name="Lights" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Mirrors">Mirrors</label></th>
  <td><input type="radio" id="Mirrors" name="Mirrors" value="Sat"required></td>
  <td><input type="radio" id="Mirrors2" name="Mirrors" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Muffler">Muffler</label></th>
  <td><input type="radio" id="Muffler" name="Muffler" value="Sat"required></td>
  <td><input type="radio" id="Muffler2" name="Muffler" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Oil Pressure">Oil Pressure</label></th>
  <td><input type="radio" id="Oil Pressure" name="OilPressure" value="Sat"required></td>
  <td><input type="radio" id="Oil Pressure2" name="OilPressure" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Radiator">Radiator</label></th>
  <td><input type="radio" id="Radiator" name="Radiator" value="Sat"required></td>
  <td><input type="radio" id="Radiator2" name="Radiator" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Rear End">Rear End</label></th>
  <td><input type="radio" id="Rear End" name="RearEnd" value="Sat"required></td>
  <td><input type="radio" id="Rear End2" name="RearEnd" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Reflectors">Reflectors</label></th>
  <td><input type="radio" id="Reflectors" name="Reflectors" value="Sat"required></td>
  <td><input type="radio" id="Reflectors2" name="Reflectors" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Safety Equipment">Safety Equipment -<br>&nbsp;&nbsp;&nbsp;&nbsp;Fire Extinguisher<br>&nbsp;&nbsp;&nbsp;&nbsp;Flags/Flares/Fusees<br>&nbsp;&nbsp;&nbsp;&nbsp;Reflective Triangles<br>&nbsp;&nbsp;&nbsp;&nbsp;Spare Bulbs and Fuses<br>&nbsp;&nbsp;&nbsp;&nbsp;Spare Seal Beam</label></th>
  <td><input type="radio" id="Safety Equipment" name="SafetyEquipment" value="Sat"required></td>
  <td><input type="radio" id="Safety Equipment2" name="SafetyEquipment" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Starter">Starter</label></th>
  <td><input type="radio" id="Starter" name="Starter" value="Sat"required></td>
  <td><input type="radio" id="Starter2" name="Starter" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Steering">Steering</label></th>
  <td><input type="radio" id="Steering" name="Steering" value="Sat"required></td>
  <td><input type="radio" id="Steering2" name="Steering" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Suspension System">Suspension System</label></th>
  <td><input type="radio" id="Suspension System" name="SuspensionSystem" value="Sat"required></td>
  <td><input type="radio" id="Suspension System2" name="SuspensionSystem" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Tire Chains">Tire Chains</label></th>
  <td><input type="radio" id="Tire Chains" name="TireChains" value="Sat"required></td>
  <td><input type="radio" id="Tire Chains2" name="TireChains" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Tires">Tires</label></th>
  <td><input type="radio" id="Tires" name="Tires" value="Sat"required></td>
  <td><input type="radio" id="Tires2" name="Tires" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Transmission">Transmission</label></th>
  <td><input type="radio" id="Transmission" name="Transmission" value="Sat"required></td>
  <td><input type="radio" id="Transmission2" name="Transmission" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Trip Recorder">Trip Recorder</label></th>
  <td><input type="radio" id="Trip Recorder" name="TripRecorder" value="Sat"required></td>
  <td><input type="radio" id="Trip Recorder2" name="TripRecorder" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Wheels and Rims">Wheels and Rims</label></th>
  <td><input type="radio" id="Wheels and Rims" name="WheelsandRims" value="Sat"required></td>
  <td><input type="radio" id="Wheels and Rims2" name="WheelsandRims" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Windows">Windows</label></th>
  <td><input type="radio" id="Windows" name="Windows" value="Sat"required></td>
  <td><input type="radio" id="Windows2" name="Windows" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Windshield Wipers">Windshield Wipers</label></th>
  <td><input type="radio" id="Windshield Wipers" name="WindshieldWipers" value="Sat"required></td>
  <td><input type="radio" id="Windshield Wipers2" name="WindshieldWipers" value="Unsat"required></td>
  </tr>
  <tr>
  <th><label for="Other">Other</label></th>
  <td><input type="radio" id="Other" name="Other" value="Sat"required></td>
  <td><input type="radio" id="Other2" name="Other" value="Unsat"required></td>
  </tr>
  </table><br>
  <label for="modal-heading">Sign in the box below:</label>
<div class="modal">
    <div class="signature-panel"></div>
  <div class="controls-panel">
      <input type="button" class="btn btn--secondary clear-button" value="Clear"/>
  </div>
</div>
<img id="rendered" src="" style="display:none">
<input type="Submit" class="Submit" value="Submit and close" onclick="renderSignature();saveImage();"/>
</div>
</form>
</body>
<script>      
  $('.signature-panel').jSignature();

  $('.clear-button').on('click', function(e) {
    e.preventDefault();
    $('.signature-panel').jSignature("reset");
  });
</script>
</html>

Вот ссылка на видео, показывающее возникшую у меня проблему: https://www.youtube.com/watch?v=h0OIJy_HgCQ&feature=youtu.be

И ссылка на код: https://www.w3schools.com/code/tryit.asp?filename=G8B90OFNIKOC

Мне нужно сохранить внешний вид формы, удаляя пустое пространство.Пожалуйста, помогите!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...