Modify the css of an entire row when checking

Question

Modify the css of an entire row when checking

Navigation

#1 by (1 votes)

1

I have the following code and clicking on a text that is cut out expands the box where it is, but I can not get the whole row to be extended along with that, something like modifying only the css to:

input[type='checkbox']:checked + tr>td>label .content { height: auto;}

This is the code of the problem:

.content{
    height:15px;
    overflow:hidden;
    text-overflow:ellipsis
}

input[type='checkbox'] { visibility: hidden; position: absolute; }

input[type='checkbox']:checked + .content { height: auto;}

<table>

<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>

<tr>
    <td>
    <label>
    <input type="checkbox" /><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
<br/>Data1,1 second line - this is a kind-of long line too
<br/>Data1,1 third line
<br/>Data1,1 fourth line</span>
        </div></label>
</td>
<td><label>
    <input type="checkbox" /><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
<br/>Data1,1 second line - this is a kind-of long line too
<br/>Data1,1 third line
<br/>Data1,1 fourth line</span>
        </div></label></td>
<td>Data3,1</td>
</tr>

<tr>
<td>Data1,2</td>
<td>Data2,2</td>
<td>Data3,2</td>
</tr>

<tr>
<td>Data1,3</td>
<td>Data2,3</td>
<td>Data3,3</td>
</tr>

</table>

html css checkbox

asked by Heileen Goodson 15.06.2018 в 00:14

source

1 answer

Filter dataframe from a tuple SQL query in Laravel

score 1 · Answer 1

Just as you have the structure of your HTML made with TABLES, it is impossible to do it with CSS, maybe with an adequate structure for that case you could but the fastest thing is to add a script:

$(function() {
      $("input[type='checkbox']").on("click", function() {
        if ($(this).is(":checked")) {
          $("input[type='checkbox']").attr("checked", "checked").prop("checked", "checked");
        } else {
          $("input[type='checkbox']").attr("checked", false).prop("checked", false);
        }
      })
    })

.content {
      height: 15px;
      overflow: hidden;
      text-overflow: ellipsis
    }
    
    input[type='checkbox'] {
      visibility: hidden;
      position: absolute;
    }
    
    input[type='checkbox']:checked+.content {
      height: auto;
    }

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <table>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
    </tr>
    <tr>
      <td>
        <label id="checkbox">
                <input type="checkbox"/><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
                    <br/>Data1,1 second line - this is a kind-of long line too
                    <br/>Data1,1 third line
                    <br/>Data1,1 fourth line</span>
                </div></label>
      </td>
      <td><label id="checkbox">
                <input type="checkbox"  aria-label="checkbox"  /><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
                    <br/>Data1,1 second line - this is a kind-of long line too
                    <br/>Data1,1 third line
                    <br/>Data1,1 fourth line</span>
                </div></label></td>
      <td>Data3,1</td>
    </tr>

    <tr>
      <td>Data1,2</td>
      <td>Data2,2</td>
      <td>Data3,2</td>
    </tr>

    <tr>
      <td>Data1,3</td>
      <td>Data2,3</td>
      <td>Data3,3</td>
    </tr>

  </table>
</body>