I want to set fixed width for cxolumns in datatable
I tried
different width for all columns.
But the width changes based on the size of data . If data has space it folds down else the table width get increased.
Thanks in advance.
You need to create a CSS definition for your datatable. Lets call this your p:datatable:
<p:dataTable id="myDataTable" .... var="something">
<p:column headerText="column1">
#{something.propertyA}
</p:column>
<p:column headerText="column2">
#{something.propertyB}
</p:column>
</p:dataTable>
Then your CSS definition must be:
#myDataTable.ui-datatable thead th,
#myDataTable.ui-datatable tbody td,
#myDataTable.ui-datatable tfoot td {
white-space: normal;
word-wrap: break-word;
}
Links explaining word-wrap: break-word
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Word-wrap in an HTML table
and white-space: normal:
http://www.w3schools.com/cssref/pr_text_white-space.asp
Related
I want to hide the currentPageReportTemplate text when I clicked a button for print. I need only print the image of the datatable.
<p:outputPanel id="outImpresion">
<p:dataTable scrollable="false" scrollWidth="50%" styleClass="myTable"
var="r" value="#{indicePartidaController.listResulIndice}"
sortMode="multiple" rows ="10" paginator="true"
paginatorPosition="bottom" emptyMessage ="No Existe Ningún Dato para esta Consulta">
currentPageReportTemplate="Mostrando Partidas del {startRecord} al {endRecord} ">
</p:outputPanel>
<p:commandButton value="Imprimir" icon="ui-icon-print" ajax="false">
<p:printer target="outImpresion" />
You can achieve this with CSS #media rules. Just create a #media print rule wherein you put all CSS selectors which should achieve the necessary look'n'feel when the print media is used. The paginator is identified by the ui-paginator classname, so if you just set that to display: none, then it will be hidden in print.
Put this somewhere in a CSS file, generally the bottom is the best place.
#media print {
.ui-paginator {
display: none;
}
}
Alternatively, you can also use
<h:outputStylesheet name="print.css" media="print" />
with a separate print.css file containing just
.ui-paginator {
display: none;
}
I need to have a separator/delimiter between <f:selectItems> for <p:selectManyMenu> this is JSF2 + Primeface3 web application. Please find the code below:
<p:selectManyMenu
id="venue" value="#{PstOfrBen.selectedVenues}"
required="true" style="width: 285px;height: 200px">
<f:selectItems value="#{BsnsDshbrdBen.business.venues}" var="venue"
itemLabel="#{venue.venueAsDisplayString}" itemValue="#{venue.seoURL}" />
</p:selectManyMenu>
Just adapt the class of the menuitems:
.ui-selectlistbox-item {
border-bottom: 1px solid black;
}
In my application I have a <p:dialog>, in the dialog I placed a h:selectBooleanCheckbox . If this is checked then one row below this will apear otherwise
this row will hidden.By default dialog's position is center of the page. Now Problem is when I checked this booleanCheckbox the height and width of dialog is
increased as new row's content is greater than previous dialog , then the position doesn't remain center of the page, I mean the dialog's size increases bottom and right side.
How I can display dialog at center after increasing its content? Any pointer will be very helpful to me . Thanks,
Sory for my bad English.
code of .xhtml is given below:
<p:dialog id="popUp" widgetVar="popUpWidget"
showEffect="fade" hideEffect="explode" resizable="false" modal="true">
<p:row>
<h:outputLabel value="#{adbBundle['addRemoveActivityManagers']}" />
<h:selectBooleanCheckbox value="#{activityListController.editActivityManager}" immediate="true">
<p:ajax event="click" update="adminPanel" listener="#{activityListController.updateActivityManager}"/>
</h:selectBooleanCheckbox>
</p:row>
<p:row rendered="#{activityListController.editActivityManager}">
<p:column>
<p:dataTable id="sourceManagerDataTable" value="#{activityListController.activitySourceUsers}" var="manager" liveScroll="true" scrollRows="5"
scrollHeight="125" selection="#{activityListController.selectedActivitySourceUsers}" selectionMode="multiple"
filteredValue="#{activityListController.filteredSourceUsers}" scrollable="true" styleClass="activityManager">
<f:facet name="header">
<h:outputText value="Available Managers" />
</f:facet>
<p:column headerText="Full Name" sortBy="#{manager.lastName}" filterBy="#{manager.fullName}" filterMatchMode="contains">
<h:outputText value="#{manager.lastName}, #{manager.firstName}" />
</p:column>
</p:dataTable>
</p:column>
</p:row></p:dialog>
So when you click to the checkbox or check it call a function which re-renders your dialog so add this onstart="setSize();" to you p:ajax:
And below is the JavaScript function:
function setSize () {
$(".ui-dialog").css ({
"width": 300,
"height": 200,
"left": "50%",
"top": "50%",
"margin-left": -150,
"margin-top": -100
});
}
Don't forget if you decide to change height or width values you should give the margin values as -1/2 times of them. The values that I gave are not certain you should chande them if it should be bigger or whatever.
If you want to detect unchecked checkbox and set height due to it's state our function can be sth. like that:
function setSize () {
var checkBox = $(document.getElementById('myCheckBox'));
$('.ui-dialog').css ({
'width' : 300,
'height': 200,
'left': "50%",
'top': "50%",
'margin-left': -150,
'margin-top': -100
});
if(!checkBox.checked) {//If it doesn't checked; it can be checkBox.attr('checked')
$(".ui-dialog").css ({
"height": 150, //New height value which is starting dialog height when it's unchecked
"margin-top": -75
});
}
}
}
You should give the correct clientID of your checkbox which you can see in your browser's developer options also maybe instead of this; height:auto; can work as well.
In a MVC application in asp.net , in my view I have a table :
<table width="100%" class="personRow">
<tr class="personRowHeader">
<td style="width: 40%;"> Subiect </td> ...
and for table i use style personRow , an for rows personRowHeader defined like this :
table.personRow
{
background-color:#EEEEEE;
border:2px solid white;
}
table.personRow tr.personRowHeader
{
border-bottom-color : #FFFFFF;
border-bottom-style : solid;
border-bottom-width: medium;
font-weight: bold;
background-color: #CCCCFF;
}
When I use only personrow the setting for table in design of my page take the modifications , but when I use the setting for my row nothing happen.Can somebody tell me why doesn't work the setting for rows ?
I put your code in jsfiddle, replaced only the colors with more visible colors, but I see nothing wrong.
http://jsfiddle.net/e9wvY/1/
Check it out yourself, everything is working as intended.
give this a try and let me know it it worked for you:
<table width="100%" class="personRow">
<tr>
<td style="width: 40%;"> Subiect </td> .
for your css, use this block
table.personRow
{
background-color:#EEEEEE;
border:2px solid white;
}
table.personRow tr
{
border-bottom-color : #FFFFFF;
border-bottom-style : solid;
border-bottom-width: medium;
font-weight: bold;
background-color: #CCCCFF;
}
What we have done so far is removing the need to explicitly use class attribute from your TRs, and instead, let the CSS manage it by pointing out that any TR under a table that has a class of "personRow", should use this style
I have a tabbedpanel declared like so :
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<sj:tabbedpanel id="mytabs2" selectedTab="0">
<sj:tab id="tab1" href="one.jsp" label="Tagged"/>
<sj:tab id="tab2" href="two.jsp" label="Search"/>
<sj:tab id="tab3" href="three.jsp" label="Add"/>
</sj:tabbedpanel>
I'm using the struts2 jquery plugin - http://code.google.com/p/struts2-jquery/
How can I resize and center the tab on screen ?
The tab should be 70% in width and appear in the center.
I've tried wrapping the tabbedpanel in a dev element and then using :
<style>
div { width:80%; text-align:center; }
</style>
But its not working too well. The width resizes but messes up my formatting within the tab elements. Is there another way ?
Thanks
Centering a div can be done by setting it's width to the desired value and setting margin to auto. Text-align only affects inline elements inside the div. (This is why your design gets messed up.)
div.yours { width: 70%; margin-left: auto; margin-right: auto }
div { width:80%; margin: 0 auto 0 auto}