Ячейка таблицы не интерактивна из-за содержимого в ней - PullRequest
Новая
       46

Ячейка таблицы не интерактивна из-за содержимого в ней

1 голос
/ 10 апреля 2020

Ячейки календаря с содержимым внутри не являются полностью интерактивными, в отличие от пустых ячеек. Я могу щелкнуть только по номеру даты, остальная часть ячейки блокируется содержимым.

Содержимое в ячейке равно ul, для которого я попытался установить относительное положение и добавить отрицательный z-индекс. Также добавлен положительный z-индекс к td. Визуально я вижу, что ul идет дальше от наблюдателя, но независимо от того, клетка все еще не полностью интерактивна. Я хочу иметь возможность щелкать в любом месте ячейки, даже если в ней есть контент. Как мне этого добиться?

HTML структура выглядит так: 

<td>
    <a href="#" ... >
        <span class="date">...</span>
    </a>
    <ul>
        <a href="#" ... ></a>
        <li>
            ...
        </li>
    </ul>
</td>

Скриншоты:

Cell with content Empty cell

Ответы [ 2 ]

1 голос
/ 10 апреля 2020

Трудно сказать, что вы делаете неправильно без вашего CSS. Тем не менее, я думаю, что подход, который вы должны использовать для решения вашей проблемы, должен быть следующим:

  • Absolute позиционируйте ваш контент, который является тегом ul. Это вывело бы контент из нормального потока рендеринга.
  • Чтобы сделать всю ячейку кликабельной, сделайте теги a display:block и height: 100%.
  • Поскольку контент ul абсолютно позиционирован, вам придется применить position: relative к родителю, т.е. td. Теперь содержимое должно быть размещено в соответствии с ячейкой, чтобы вы могли легко настроить ее положение.

Суть вышеупомянутого будет выглядеть примерно так: 

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
}
ul {
 list-style: none;
}

table {
  table-layout: fixed;
  width:100%;
}
td {
  border: 1px solid;
  border-radius: 3px;
  height: 100px;
  padding: 10px;
  background: #3f3f3f;
  position: relative;
  font-family: sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}

.cell {
    color: #f2f2f2;
    display: block;
    height: 100%;
}

.cell_list {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}
.cell_list__item {
  background: #f9b42c;
  border-radius: 3px;
  padding: 3px 12px;
}
<table>
  <tr>
    <td>
        <a href="#" class="cell">
          <span>1</span>
        </a>
        <ul class="cell_list">
          <li class="cell_list__item">
          <a href="/another_link">content</a>
          </li>
        </ul>
    </td>
    <td>
        <a href="#" class="cell">
          <span>2</span>
        </a>
        <ul class="cell_list">
          <li class="cell_list__item">
          <a href="/another_link">content</a>
          </li>
        </ul>
    </td>
    <td>
        <a href="#" class="cell">
          <span>3</span>
        </a>
    </td>
  </tr>
</table>
0 голосов
/ 11 апреля 2020

Хорошо, просто скопируйте и вставьте мой код

Это простой код каландра: 

<head>
<style>
* {box-sizing: border-box;}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}

.month {
  padding: 70px 25px;
  width: 100%;
  background: #1abc9c;
  text-align: center;
}

.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.month .prev {
  float: left;
  padding-top: 10px;
}

.month .next {
  float: right;
  padding-top: 10px;
}

.weekdays {
  margin: 0;
  padding: 10px 0;
  background-color: #ddd;
}

.weekdays li {
  display: inline-block;
  width: 13.6%;
  color: #666;
  text-align: center;
}

.days {
  padding: 10px 0;
  background: #eee;
  margin: 0;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color: #777;
}

.days li .active {
  padding: 5px;
  background: #1abc9c;
  color: white !important
}

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
  .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
  .weekdays li, .days li {width: 12.5%;}
  .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
  .weekdays li, .days li {width: 12.2%;}
}
</style>
</head>
<body>

<h1>CSS Calendar</h1>

<div class="month">      
  <ul>
    <li class="prev">&#10094;</li>
    <li class="next">&#10095;</li>
    <li>
      August<br>
      <span style="font-size:18px">2017</span>
    </li>
  </ul>
</div>

<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>

<ul class="days">  
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>

</body>

Вот результат, который я запечатлел:

Output

или если вы хотите использовать средство выбора даты. Затем используйте этот код: 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 4 DatePicker</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <input id="datepicker" width="276" />
    <script>
        $('#datepicker').datepicker({
            uiLibrary: 'bootstrap4'
        });
    </script>
</body>

Выходные данные DatePicker:

DatePicker_Output

...