2

Using Primefaces 6.1, I want to add couple of buttons to datatable footer facet. When i use float:left, button moves to left but footer section(div) shrinks.

<f:facet name="footer">
    <p:button styleClass="tableButtons" value="Edit" update="msgs"/>
</f:facet>

Output with default is:

enter image description here

Now if I add float:

    .tableButtons {
         float: left;
    }

The output is:

enter image description here

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Sannu
  • 1,202
  • 4
  • 21
  • 32

2 Answers2

6

This is a basic CSS problem. The container (in your case the table footer facet div) will be of height 0 when it only has floating childs. You can solve it by setting the overflow of the container to auto (or hidden). The footer facet is classed with ui-datatable-footer, so you can use this CSS rule:

.ui-datatable-footer {
    overflow: auto;
}

See also:

Community
  • 1
  • 1
Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
0

This worked for me. Try to put spacer with margin.right or margin.left.

<p:commandButton id="actionBotton"
                        value="Close"
                        styleClass="classNegative"
                        style="margin-right: 240px;"
                        onclick="dialogEr.hide();"
                        update="dialogEr"
                        />
Fred
  • 1,054
  • 1
  • 12
  • 32
Gerardo Medellín
  • 1