CODEWITHSUNDEEP
jsfprimefaces
Tomcat
Tomcat

Reputation: 1415

How to reduce spaces inside p:tabView in Primefaces?

I'm using Primefaces V3.3.1 and want to reduce spaces inside p:tabView. layout In this case, I have 2 nested p:tabView and p:dataTable. And real estate of screen is very expensive for us so I would like to reduce spaces shown red and blue. So, question 1:How can I reduce spaces inside p:tabView (painted red)? question 2:How can I reduce spaces around p:dataTable (painted blue)?

Thanks in advance.

Upvotes: 1

Views: 5927

Answers (1)

damian
damian

Reputation: 4044

First you should study something about css... What you call "space inside" is the padding css property, and what you call "space around" is the margin. Anyway, to reduce the padding of tabs, add the following style to your css file:

.ui-tabs .ui-tabs-panel {
      padding: 5px 5px;
}

This will reduce the panning of all your tab views. if you want this style to be applied to only some tabViews, then you should use the styleClass attribute of the tabView, and then replace the css rule with .youTabClass .ui-tabs .ui-tabs-panel

And as for the datatable.. the datatable itself does not have margin. but it seems that in your blurry screenshot there's a panel surrounding the table. the p:panel also has padding. To reduce padding of panel:

.ui-panel .ui-panel-content {
     padding: 5px 5px;
}

And also this applies to all your panels, so you should use atyleClass to make this style specific to a panel.

Upvotes: 4

Related Questions