CODEWITHSUNDEEP
cssjsfjakarta-eeprimefacesdatatable
Jalal Sordo
Jalal Sordo

Reputation: 1675

how to set primefaces datatable columns padding with CSS padding

I have the following primefaces datatable :

<p:dataTable id="tabexam"
             paginatorPosition="bottom"
             var="exam"
             value="#{dyna.listexam}"
             widgetVar="examTable"
             emptyMessage="aucun résultat trouvé pour votre recherche"
             paginator="true"
             rows="45" 
             resizableColumns="true"
             draggableColumns="true"
             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
             rowsPerPageTemplate="45,90,135"
             rowStyleClass="#{exam.studyWithRv_1 == 1 ? 'RV' : null}  #{exam.studyUrgence == 1 ? 'Urgent' : null}">

Everything is displayed properly. There was a need to reduce the datatable rows's default height and width. I have accomplished this by overriding the datatable CSS below :

.ui-datatable-resizable thead th, .ui-datatable-resizable tbody td, .ui-datatable-resizable tfoot td {

                white-space: nowrap;
                overflow: hidden;
                border-width: 1px;
                border-style: none;
                text-overflow: ellipsis;
                text-align: left;
                padding-bottom: 0.5px!important;
                padding-top :0.5px!important;
                padding-left: 0.5px!important;
                padding-right :0.5px!important;

            }

But after running this code (the display is just exactly how i want it to be)i found out that the datatable has lost the column's resizability feature.

any one can tell me what i'm missing here.

NOTE: if i remove the left and right padding , the resizability comes back to work.

padding-left: 0.5px!important;
padding-right :0.5px!important;

Upvotes: 2

Views: 7856

Answers (1)

Daniel Teleginski Camargo
Daniel Teleginski Camargo

Reputation: 4423

When resizeble columns are rendered, a span element is inserted on every th element as follows:

<span class="ui-column-resizer ui-draggable" style="position: relative;">&nbsp;</span>

This span captures the resize events. You can highlight it (for debuging pourpose) like this:

.ui-column-resizer.ui-draggable{
    background-color: red !important;
}

Your css is causing the span to be hidden under the th element when overriding the padding-right (testing on google chrome the minimum padding should be 3px).

You could force span to be shown with some css:

.ui-column-resizer.ui-draggable{
    position:relative;
    left:-10px;
    background-color: red !important;
}

You will need to test on different browsers to see if they all have the same behavior.

Upvotes: 2

Related Questions