I have simple treeTable. http://www.primefaces.org/showcase/ui/treeTable.jsf
I want to change expand and collapse icon of this treeTable. How can I do that?
If you want to use custom icons (images), override the following CSS classes for their respective uses, on the treetable:
ui-icon : to customise the expanded-row state icon (the triangle)
.ui-icon {
width: 16px;
height: 16px;
background-image: url("/your-image-here");
}
ui-icon-triangle-1-e ui-c : to customize the collapsed-row state icon
If you want to use more modern fontAwesome 'icons', see Change icon from jQuery UI to FontAwesome in PrimeFaces
Related
I will like to replace ClaimProviderSelection buttons with just hypertext links. How can I go about this? I have taken a look a sample css (I am not a content developer) but it seems the part I am interested in is what B2C merges with between the <div id="api"></div> elements.
Please help.
B2C injects its HTML into the <div id="api"></div> element on the page layout template. Those buttons will all have the accountButton class so can be identified with the CSS selector #api button.accountButton.
If you're already using custom page templates then you should just be able to update your CSS to target those button elements and remove all of the default button styling, similar to this:
#api button.accountButton
{
background: none;
color: black;
border: none;
display: inline-block;
padding: 0;
margin: 0;
text-decoration: underline;
}
If you're not already using custom page layout templates then that should be your first step. There's guidance in the Microsoft Docs about how to do that both if you're using user flows and custom policies.
I would like to know if there is a method to label and rename the text displayed by JSF Choose a File when I'm using the tag <h:InputFile> in JSF.
That's not possible with native HTML. The appearance and the button's label is browser-dependent. The particular "Choose File" label is recognizable as the one from Chrome with English language pack (e.g. FireFox uses "Browse..."). As JSF is in the context of this question just a HTML code generator, it can't do much for you either.
There are several ways to achieve this. All can be found in this HTML+CSS targeted Q&A: Styling an input type="file" button, particularly this answer.
Easiest way is to reference it via <h:outputLabel for>, style it to look like a button and hide the actual file upload component. Clicking the label element will as usual just delegate the click event to the associated input element. See also Purpose of the h:outputLabel and its "for" attribute.
Here's a non-IE compatible kickoff example (it's supported in IE's successor Edge):
<h:outputLabel for="file" value="Pick a file" styleClass="upload" />
<h:inputFile id="file" value="#{bean.file}" styleClass="upload" />
label.upload {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 2px;
cursor: pointer;
}
input.upload {
display: none;
}
If you'd like to support IE9+ too, replace appearance: button by a background and border. It's only harder to get it to look like a true button. The below is far from ideal, but should at least get you started.
label.upload {
padding: 2px;
border: 1px solid gray;
border-radius: 2px;
background: lightgray;
cursor: pointer;
}
If you'd like to support IE6-8 too, which won't delegate the label's click event to the hidden input element, then well, head to the aforementioned related question for CSS tricks on that and rewrite JSF code in such way that it generates exactly the desired HTML+CSS(+JS) output.
A completely different alternative is to grab an UI oriented JSF component library, such as PrimeFaces which is based on jQuery UI. See also its <p:fileUpload> showcase.
I am trying to place an editable spreadsheet control in a webpage without the menus and toolbars. I saw the postings about this and the last one said to use Google Docs spreadsheet and then choose Publish. If you use "?widget=true&headers=false" then the menus and toolbars will be removed.
This works great. The only problem is the data is not editable! It's a static spreadsheet. Is there a way to get the google spreadsheet control in a web page without menus and toolbars but make it editable?
I simply put the spreadsheet control inside a div and used the div to cover up the tool bars and scroll bars, etc. Worked great.
Here is the html:
<div id='spreadsheet' style="position:absolute; top: 900px; left: 3px; width: 1058px; height: 350px;overflow: hidden">
<iframe style="position:relative; top: -143px; left: -48px; width: 1140px; height: 650px;" src="https://docs.google.com/spreadsheets/d/1zt7JNkuqYKGKxRXSTtgjWeUFnCxRjSLB0UKs1oJk6PY/edit#gid=1047354991?widget=true&headers=false" width="600" height="600"></iframe>
</div>
i want to override the below css to the title attribute in h:outputText.
css:
<style type="css/text">
.title
{
border : 1px solid #FF9933;
font-family : verdana;
font-size : 14px;
font-weight:normal;
color: #000000;
background-color:#fae6b0;
padding : 5px 5px 5px 5px";
}
</style>
<h:outputText id="userName"
value="#{userBean.userName}"
title="#{userBean.userName}"/>
<h:outputText id="userAddress"
value="#{userBean.userAddress}"
title="#{userBean.userAddress}"/>
With the help of below link. I tried to change the title attribute in html, it works fine.
How to change the style of Title attribute inside the anchor tag?
how to apply the same thing into the richfaces.
The tooltip as represented by the HTML element's title attribute is not styleable by CSS. The style is fully controlled by the webbrowser and is usually represented in client operating system platform default tooltip style. So, e.g. when the client is running Windows 7, then the tooltip will be presented in Windows 7 default style. Again, you have no control over this.
Your best bet is to replace the title attribute by a fullworthy HTML <div> which appears/disappears on mouseover/out. This allows full control over styling by the usual CSS means. As you already know, RichFaces has a <rich:tooltip> component which does exactly that. If it is insufficient for you for some reason, then you may want to consider to look for another JS/jQuery plugin which will automagically convert all title attributes to styleable <div> elements. One of them is qTip. All you need is then basically:
<h:outputScript name="scripts/jquery.qtip-1.0.0-rc3.min.js" target="head" />
<h:outputScript target="body">$("[title]").qtip();</h:outputScript>
(provided that you're using a RichFaces version which already ships with jQuery bundled, so that you don't need to manually include jQuery)
I am currently doing the menu of a web application and I would like to use a different theme for that menu from the theme I use for the rest of the application.
I use PrimeFaces' default theme, though it could change later, and a custom theme for the menu, that I made with the jQuery theme roller (http://jqueryui.com/themeroller)
I would like to apply this theme on the main menu only, which is defined in a CSS file :
#top {
position: relative;
background-color: #333367;
color: white;
padding: 2px;
margin: 0px 0px 2px 0px;
max-height: 60px;}
I can apply the custom theme to the entire application using
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>custom-theme</param-value>
</context-param>
But it isn't applied to a particular area
The menu is defined here in my template :
<div id="top">
<ui:insert name="menu">
<ui:include src="../snippets/menu.xhtml"/>
</ui:insert>
</div>
Does anyone has a suggestion to use the custom theme only for the menu?
Thanks
You're really looking to combine two themes into one (or to partially combine two themes). You can't do this just with the themeroller, but you could extract the relevant parts of your custom theme and add #top to the selectors. So where the generated theme might have
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
...
You'd edit it to be
#top .ui-state-default a, #top .ui-state-default a:link, #top .ui-state-default a:visited {
...
Potentially a lot of work and not very efficient, but the way jQuery UI themes are set up, they apply the same styling to all the elements