CSS Expandable Text in Table Cell is Showing Checkbox

styling checkboxes css tricks
css checkbox
checkbox css style examples
custom checkbox css
css checkbox'':checked
css checkbox'':checked change color
simple checkbox css
not(:checked css)

I employed the CSS trick to hide a checkbox on expandable text in a CSS table cell, however, the checkbox is showing when it is supposed to be hidden (see pic). The "view source" code from FireFox is listed below exactly as it was written to the file. Any suggestions for getting rid of the checkbox? The text does also not expand, so I think something is off?

<!DOCTYPE html><html><body>
<style type="text/css">
 table.gridtable {
    font-family: Arial, Helvetica,sans-serif;
    font-size:20px;
    color: black;
    border-width:  2px;
    border-color: Black
    border-collapse: collapse;
    border-style: solid;
}
 table.gridtable th {
    color: Black;
    border-width: 0px;
    padding: 8px;
    border-style: solid;
    border-color: black;
    background-color: #EEEEFF;
}
 table.gridtable tr {
    color: Black;
}
 table.gridtable tr:nth-child(odd) {
  background-color: #EEEEFF;
}
 table.gridtable tr:nth-child(even) {
  background-color: White
}
 table.gridtable td {
    border-width: 0px;
    padding: 8px;
    border-style: solid;
    border-Color: #8080FF;
}
 .content{
  height:  15px;
  width:100px;
  overflow: hidden;
  text-overflow: ellipsis
}
Input()[type='checkbox'] { visibility: hidden; position: absolute; }
Input()[type='checkbox']:checked + .content { height: auto; width: auto;}
</style>
<table class="gridtable" Align=center>
<tr><th>Group</th><th>Indication</th></tr>
<tr>
<td align="center">approved</td><td><label><input type ="checkbox" /><div class="content"><span class="hidden">
Indicated for the maintenance of ....
</span></div></label></td></tr>
</table></body></html>

In your code you have Input()[type='checkbox'] which should be changed to input[type='checkbox']. So if you remove the () and it should work.

Also I noticed that your text is being cut off in one of the table cells and you might want to remove the height: 15px on the .content class so all the text shows.

Also also just an observation but you have a div inside a label tag and to my knowledge that is not good HTML structure and I suggest removing the label since it doesn't seem like its being used. Hope that helps.

CSS Expandable Text in Table Cell is Showing Checkbox, I employed the CSS trick to hide a checkbox on expandable text in a CSS table cell, however, the checkbox is showing when it is supposed to be hidden (see  The :checked CSS pseudo-class selector represents any radio ( <input type="radio"> ), checkbox ( <input type="checkbox"> ), or option ( <option> in a <select>) element that is checked or toggled to an on state. The user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.

The "Checkbox Hack" (and things you can do with it), The “Checkbox Hack” is where you use a connected <label> and <input font-​family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial; You can hide the default UI of a radio button or checkbox, and display a custom version right on top of it. this these days, but expandable sections can be done with the checkbox hack. The look of an HTML table can be greatly improved with CSS: Alfreds Futterkiste. Berglunds snabbköp. Christina Berglund. Centro comercial Moctezuma. Francisco Chang. Königlich Essen. Laughing Bacchus Winecellars. Yoshi Tannamuri. Magazzini Alimentari Riuniti. Giovanni Rovelli. Try it Yourself » To specify table borders in CSS, use the border

@Crazymatt, below is the solution that worked. I removed the () per your suggestion but had to leave the label tag, since it wouldn't work without a label tag. (see this code where I fetched the example CSS code, which uses a label tag.) Also, I needed the height and made it 30px.

<!DOCTYPE html><html><body>
<style type="text/css">
 table.gridtable {
    font-family: Arial, Helvetica,sans-serif;
    font-size:20px;
    color: black;
    border-width:  2px;
    border-color: Black
    border-collapse: collapse;
    border-style: solid;
}
 table.gridtable th {
    color: Black;
    border-width: 0px;
    padding: 8px;
    border-style: solid;
    border-color: black;
    background-color: #EEEEFF;
}
 table.gridtable tr {
    color: Black;
}
 table.gridtable tr:nth-child(odd) {
  background-color: #EEEEFF;
}
 table.gridtable tr:nth-child(even) {
  background-color: White
}
 table.gridtable td {
 max-width:  100px;
 overflow: hidden;
 Text-overflow: ellipsis
 white-Space() nowrap;
    border-width:   0px;
    padding: 8px;
    border-style: solid;
    border-Color: #8080FF;
}
 .content{
  height: 30px;
  width: 100px;
  overflow: hidden;
  Text-overflow: ellipsis
}
Input[type='checkbox'] { visibility: hidden; position: absolute; }
Input[type='checkbox']:checked + .content { height: auto; width: auto;}
</style>
<table class="gridtable" Align=center>
<tr><th>Group</th><th>Indication</th></tr>
<tr>
<td align="center">approved</td><td><label><input type ="checkbox" /><div class="content"><span class="hidden">
Indicated for the maintenance ... very long text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
</span></div></label></td>
</tr> 
</table></body></html>

:checked, The :checked CSS pseudo-class selector represents any radio (input type="radio​"), </tbody> </table> <label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>. CSS. /* Hide the toggle checkbox */ #expand-toggle { display: none; } /* Hide expandable content [cell text], [cell text], [cell text]. The "Checkbox Hack" is where you use a connected <label> and <input type="checkbox"> and usually some other element you are trying to control, like this: Then with CSS, you hide the checkbox entirely. Probably by kicking it off the page with absolute positioning or setting its opacity to zero. But just because the checkbox is hidden, clicking

@zerOOne, I actually have multiple cells which require hidden overlap, and with multiple cells in the example below, only the first cell can expand/contract:

<!DOCTYPE html><html><body>
<style type="text/css">
table.gridtable {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: black;
  border-width: 2px;
  border-color: Black;
  border-collapse: collapse;
  border-style: solid;
}

table.gridtable th {
  color: Black;
  border-width: 0px;
  padding: 8px;
  border-style: solid;
  border-color: black;
  background-color: #EEEEFF;
}

table.gridtable tr {
  color: Black;
}

table.gridtable tr:nth-child(odd) {
  background-color: #EEEEFF;
}

table.gridtable tr:nth-child(even) {
  background-color: White
}

table.gridtable td {
  border-width: 0px;
  padding: 8px;
  border-style: solid;
  border-Color: #8080FF;
}

label.content {
  display: table;
  table-layout: fixed;
  cursor: pointer;
}

#chx {
  display: none
}

.hidden {
  max-height: 50px;
  max-width: 100px;
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: .7s ease-out;
}

#chx:checked+.content .hidden {
  max-height: 500px;
  max-width: 1800px;
  transition: .7s ease;
  /* Remove white-space if you want the animation go horizontal */
  white-space: normal;
  overflow: visible;
}
</style>


  <table class="gridtable">
    <tr>
      <th>Group</th>
      <th>Indication</th>
      <th>Indication</th>
      <th>Indication</th>
      <th>Indication</th>
    </tr>
    <tr>
      <td>approved</td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <div class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
      </td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <div class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
      </td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <div class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
      </td>
      <td>
        <input id='chx' type="checkbox" />
        <label for='chx' class="content">
      <div class="hidden">
   LOOOONNGGG WOOOORRRRDDSS TTOOOO TESSSSSSSST EEEEEELLLIIPSISSSS AAANNDDD WWWWARRPPPIIINNGGGG
</div>
</label>
      </td>
    </tr>
  </table>
</body>

</html>

Dynamically add Checkbox to a Table using JavaScript, Here in this post I'll show you how to add checkbox to table cells dynamically font: 17px Calibri; } table, th, td, th { border: solid 1px #DDD; border-collapse:  Click the button to toggle between showing and hiding the collapsible content. Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

JavaScript and jQuery by Examples, The attribute placeholder="text" is used to show hints on the text field as watermark. <td><label><input type="checkbox" name="color" value="r">Red</​label> h1 { font-size: 28px; } table { border-collapse: collapse; } td { padding: 10px;  Login Form Signup Form Checkout Form Contact Form Social Login Form Register Form Form with Icons Newsletter Stacked Form Responsive Form Popup Form Inline Form Clear Input Field Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Fullscreen Search Input Field in Navbar Login Form in Navbar Custom Checkbox/Radio Custom Select Toggle Switch Check Checkbox Detect Caps Lock Trigger Button on Enter Password Validation Toggle Password Visibility Multiple Step Form Autocomplete

Vertically center text and checkbox that are floated, It's simply a div containing text that is floated left and a checkbox float right. I would use display table and table-cell approach for automatic alignment. width: 500px; overflow: auto; display:table; border-collapse:collapse;  George uses the checkbox hack and demonstrates how to create a show more/less component with CSS and no JavaScript. Get 3 months access to 400+ books and courses for $3/m! Get Access Now

How To Create a Collapsible, Tables. Zebra Striped Table Responsive Tables Comparison Table Click the button to toggle between showing and hiding the collapsible content. Collapsible. Some collapsible Step 2) Add CSS: Style the accordion: Example. /* Style the button that is used to open and close the collapsible content */ text-align: left; Vertically center text and checkbox that are floated. HTML & CSS. ttmt February 22, I would use display table and table-cell approach for automatic alignment.

Comments
  • Thanks - working on it now. Online examples don't have a semicolon ";" after the ellipses, so is that correct, or a semicolon needed?
  • In CSS you don't need a semicolon after the last entry in a group of properties. Me personally I always add one to the last entry to avoid running into errors if I add an additional entry below the last one.
  • I like the animated effect. However, the long text appears bold, and isn't that because the <b>text</b> is the bold tag? How can the normal font be used?
  • Replace <b> with just about any tag you want. Well within reason of course an <iframe> has too many special behaviors but a more generic tag like <span> is a good substitute. I just used <b> because I tend to be terse and minimal when writing code.