CODEWITHSUNDEEP
html-tableportletdisplay
Its me
Its me

Reputation: 1

Table width changes for display:none style

I have 2 portlet containing a table each. On first button click one portlet with table gets displayed and other remain hidden. On another button click vice-versa happen like entire portlet toggle. I did this using style display:none and show-hide, but now I am stuck with a problem that table column width changes for display none. I cannot use visibility since it creates a gap. How can I resolve this issue?

       <div class="portlet light bordered">
           <div class="portlet-body">
              <table id='aa'></table>
          </div>
       </div>
       <div class="portlet light bordered" style="display: none">
           <div class="portlet-body">
              <table id='bb'></table>
          </div>
       </div>

Upvotes: 0

Views: 3105

Answers (2)

Raul Pinto
Raul Pinto

Reputation: 1105

I'm not sure, whether OP's issue was resolved, but I had a similar problem: I wanted to hide specific table rows and toggle their display with a click. I tried jQuery.toggle() but rows displayed were smaller than the other rows in the same table.

I checked actual CSS display value and it showed table-row, hence, I wrote the following js function, which worked:

    function toggleTableRow() {
        let hiddenTableRows = $('.hidden-table-rows');
        if($(hiddenTableRows[0]).css('display') === 'none') {
            $(hiddenTableRows).css('display', 'table-row');
        } else {
            $(hiddenTableRows).css('display', 'none');
        }
    }

For reference, my HTML table looked similar to this:

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr class="hidden-table-rows">
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
    </tr>
  </tbody>

Upvotes: 0

sorifiend
sorifiend

Reputation: 6307

If you set display: none then it will hide the element and also ruin formatting.

To fix it you will need to setup your button click to add the following to style display: initial, or set it to whatever you need to get your desired result, maybe display: inherit or display: inline.

See here for more info: https://www.w3schools.com/jsref/prop_style_display.asp

A quick snippet from the link:

The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.

And some info about the values I mentioned above:

block - Element is rendered as a block-level element

inline - Element is rendered as an inline element. This is default

initial - Sets this property to its default value.

Upvotes: 1

Related Questions