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;
}
Related
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #ff0000;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
background-color: #ffeeee;
border:1px groove;
}
.validation-summary-errors {
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid {
display: none;
}
How lighted field in a green color with succesfull validation? Add new option ".input-validation-valid" dont help. May be used special jQuery plugins? Thanks in advance for all your help
Assuming you using query validation and unobtrusive validation, when a field is valid the error message is removed from the DOM so there's nothing to style! A typical error renders this (note the <span> within a <span>
<span class="field-validation-error" data-valmsg-for="Account.Description" data-valmsg-replace="true">
<span for="Account_Description" generated="true" class="">Please enter a description</span>
</span>
When its valid, the inner span is removed and the class name changes to 'field-validation-valid'
<span class="field-validation-valid" data-valmsg-for="Account.Description" data-valmsg-replace="true"></span>
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
I have been looking for a solution for embedding Twitter user profiles, but have come up empty so far. What I'm looking for is something similar to how Twitter pops up a nice profile overview when you click a username on twitter.com. I took a screencap of my profile so you can see below what I'm talking about.
I don't have any need for the user timeline or anything like that, just the user info, the cover photo background would be nice as well as a link to follow the person. I took a look through Twitters embed code builder but there didn't seem to be anything that really fit the bill. I am using Wordpress so a plugin solution could be viable, but if it's just a code embed that is fine as well.
There is currently no embed functionality that I know of for the profile summary, however you can call the api to get profile information from Twitter in two ways:
For one use at a time: /users/show, or
For up to 100 users at once: /users/lookup
You can then take the returned json and style it to match the twitter format or any other style you wish.
Not really embed but this could work for you too https://dev.twitter.com/web/intents#user-intent
Here is an implementation for the button, this require some work to add the profile picture and the background picture
Icon SVG code:
<symbol id="twitter" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" /></symbol>
SASS/CSS:
.twitter a
font-family: "Roboto", "Noto Sans", "Open Sans", "sans-serif"
display: inline-flex
color: #fff
border-radius: 5px
background: #1b95e0
padding: .4em .8em
text-decoration: none
font-weight: bold
text-align: left
HTML:
<div class="twitter" style="height: 35px; width: 240px;"><a target="_blank" rel="noopener noreferrer" href="https://twitter.com/LinuxHacksOrg">
<svg height="20px" width="20px" style="margin-right: 5px; fill: #fff;">
<use xlink:href="/assets/imgs/res/icons-full.svg#twitter"></use></svg>
Follow us #LinuxHacksOrg</a></div>
<style>
.twitter a {
font-family: "Roboto", "Noto Sans", "Open Sans", "sans-serif";
display: inline-flex;
color: #fff;
border-radius: 5px;
background: #1b95e0;
padding: .4em .8em;
text-decoration: none;
font-weight: bold;
text-align: left;
}
</style>
<div class="twitter" style="height: 35px; width: 300px;"><a target="_blank" rel="noopener noreferrer" href="https://twitter.com/LinuxHacksOrg">
<svg height="20px" width="20px" style="margin-right: 5px; fill: #fff;" viewBox="0 0 512 512" preserveAspectRatio="none">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
</svg>
Follow us #LinuxHacksOrg</a></div>
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;
}
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