1

I have an html table inside a primefaces panel. I'm using the primefaces panel for its collapse functionality.

<!DOCTYPE html>
<html lang="en"
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui">
<h:head>
  <title>demo</title>
</h:head>       
<h:body>
  <h:outputStylesheet library="css" name="demo.css"/>
  <p:panel id="toggleable" header="Panel header" toggleable="true">
  <table style="width:100%">
    <tr>
      <th>Forename</th>
      <th>Surname</th>
      <th>Age</th>
      <th>Country</th>
      <th>City</th>
      <th>Occupation</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith Jones Dunhill</td>
      <td>50</td>
      <td>England</td>
      <td>London</td>
      <td>Deep sea diver</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>Scotland</td>
      <td>Glasgow</td>
      <td>Truck Driver</td>
    </tr>
    </table> 
  </p:panel>
</h:body>            
</html>

With a stylesheet

th{
  background-color: Yellow;
  border: 1px solid Green;
}
td{
  border: 1px solid blue;
}
.ui-panel .ui-panel-content {
    padding: 0;
}
table{
  overflow-x:scroll;
}

The page looks ok until I make the browser window smaller. Then, the table spills outside of the panel area.

I was supposing that I could make a horizontal scrollbar appear in the table, once it can collapse no further, but this doesn't work.

Could anyone tell me how to deal with this issue? I'm actually wanting a jsf datatable on the panel, but I'm supposing any solution this simpler situation would still apply.

In response to Randy, as far as I can see, if I paste that code into jsfiddle, the primefaces component doesn't get rendered, so the problem can't be seen. I've put a demo here:

primefaces panel

Make the browser window narrower until the table can't collapse any more. The table is now spilling outside the panel area.

I'm using Firefox 45.0.1

twisted
  • 742
  • 2
  • 11
  • 19
  • This table doesn't seem to do strange things no JSFiddle, could you be more specific what exactly it is that's wrong? – Randy Mar 24 '16 at 13:54
  • 1
    WARNING: http://stackoverflow.com/q/11988415 – BalusC Mar 24 '16 at 13:58
  • Randy: I've put a demo on a public facing server, link above. – twisted Mar 24 '16 at 15:36
  • _"I was supposing that I could make a horizontal scrollbar appear in the table, once it can collapse no further, but this doesn't work."_ What did you try? Why did you not mention what you tried? And "doesn't work" is like looking at it as an end-user, not a developer. Btw, the first thing that came to my mind when reading this, IS the solution. Just don't google for a the specific issue of "how to make a table stay inside a primefaces panel" but the more generic issue of "how to add a scroll bar to content in html" – Kukeltje Mar 25 '16 at 18:59
  • (sorry I don't give you an answer, just hints, see https://en.wiktionary.org/wiki/give_a_man_a_fish_and_you_feed_him_for_a_day;_teach_a_man_to_fish_and_you_feed_him_for_a_lifetime) – Kukeltje Mar 25 '16 at 19:04
  • additional hint: why do you try to make the (content of the) table scroll? Why not the content of the panel? – Kukeltje Mar 26 '16 at 13:56

0 Answers0