Chema Chema - 4 months ago 12
CSS Question

row panelGrid over another row CSS

I have a panelGrid to show information. When I insert one button in the first row, the rest of the rows move down. If I insert the button the rest of the rows don't must be moved. What CSS properties I need use.
A picture of my panel:

enter image description here

Shadowed row is the first row. Next picture show the second row:
enter image description here

And I want to my panel look like this:
enter image description here

I have used position:absolute over the button but my page is responsive and when I resize the page, this property crash responsive design. So what properties I need to use for get my goal? I am using Primefaces.

Regards

Answer

You'll need a div wrapper for your button, and the button to be floated inside so the div does not take extra height.

<table>
  <tr class="first-row">
    <td>
      <div class="button-wrapper">
        <a class="some-button">+</a>
      </div>
      First row
    </td>
  </tr>
  <tr class="second-row">
    <td>
    Second row  
    </td>
  </tr>
</table>

And the CSS:

.button-wrapper {
  float: right;
  height: 1px; // Fool the row by thinking that this div doesn't have height
}
.some-button {
  float: right;
}

This way, when the navigator renders the row, it thinks that the div child has only 1 px, so it does not expand vertically.

Look at this example: https://jsfiddle.net/z2L715ev/2/

Comments