Html Question posted in
Some basic documentation can be found here.

Small Input-element not visible on phone inside td-element. HTML CSS

I have a Sudoku project with a 9×9 table of numbers <td> elements and i generate inputs at some <td> which makes it <td> <input id="cell_${rowIndex}_${colIndex}"> </td> there instead of the usual <td> 8(any onedigit number 1-9) <td>. But somehow when i do styling for the inputs, while these cells work well on pc, they dont at all on my phone as you can see in the attached pictures. How can i fix the phone one? Phone Picture
PC Picture

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
        input {
width: 100%;
height: 100%;
box-sizing: border-box
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
appearance: none;
border: none;
text-align: center;
font-size: 100%;
padding:0;
margin: 0;


    input {
    
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    appearance: none;
    border: none;
    text-align: center;
    font-size: 100%;
    padding:0;
    margin: 0;
}

/* Remove spin buttons for number input on webkit browsers */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

    } This works now. Thanks for you Help!


  2. 0

    Would you test this code and probably using responsive design techniques, such as media queries, you can ensure that your Sudoku grid adapts to different screen sizes and resolutions.

    <!DOCTYPE html>
<html>
<head>
  <title>Sudoku Project</title>
  <style>
    /* CSS styles for the Sudoku grid */
    .sudoku {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 2px;
      border: 1px solid #000;
      width: 400px; /* Adjust the width as needed */
      margin: 0 auto; /* Center the grid horizontally */
    }
    
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: #fff;
    }
    
    input {
      width: 100%;
      height: 100%;
      border: none;
      text-align: center;
      font-size: 18px;
    }
    
    /* CSS styles for the empty cells */
    .empty {
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div class="sudoku">
    <div class="row">
      <div class="cell empty">*</div>
      <div class="cell">8</div>
      <div class="cell empty">*</div>
      <div class="cell empty">*</div>
      <div class="cell empty">7</div>
      <div class="cell empty">*</div>
      <div class="cell empty">*</div>
      <div class="cell">6</div>
      <div class="cell empty">*</div>
    </div>
    <div class="row">
      <div class="cell empty">*</div>
      <div class="cell">9</div>
      <div class="cell empty">*</div>
      <div class="cell">1</div>
      <div class="cell empty">*</div>
      <div class="cell empty">*</div>
      <div class="cell">4</div>
      <div class="cell empty">*</div>
      <div class="cell">7</div>
    </div>
    <!-- Repeat the above structure for the remaining rows -->
    <div class="row">
      <!-- Sixth row -->
    </div>
    <div class="row">
      <!-- Seventh row -->
    </div>
    <div class="row">
      <!-- Eighth row -->
    </div>
    <div class="row">
      <!-- Ninth row -->
    </div>
  </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search