Primefaces UI issues from Migration

UI Components for JSF
Post Reply
jenni03
Posts: 8
Joined: 21 Jul 2010, 20:53

12 Sep 2019, 23:09

When I'm working on the migration of our application from PrimeFaces 3.4 to 6.0, I also encountered some UI issues such as buttons/panels unaligned, losing background color etc.

The application has a style sheet "primefaces.css" as below. It seems to me this style sheet controls the styles of the primefaces UI components used in the xhtml files.
However, I'm not sure where this css style file is from. Do I need to get a newer version of this file when PrimeFaces library version is upgraded in order to fix these UI issues?

I searched online and the primefaces user forum and did not find exact answer for this question. I'm kind of new to JSF and Primefaces and am learning while doing this migration task.
Hope you can help give some advises for these UI issues. Thanks in advance!

Code Snippets for the CSS style sheet: primefaces.css

Code: Select all

@charset "UTF-8";

/* CSS Document */

/*!* jQuery UI CSS Framework 1.8.20** Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)* Dual licensed under the MIT or GPL Version 2 licenses.* http://jquery.org/license** http://docs.jquery.com/UI/Theming/API*//* Layout helpers----------------------------------*/.ui-helper-hidden {
	display: none;
}

.ui-helper-hidden-accessible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px,1px,1px,1px);
}

.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}

.ui-helper-clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.ui-helper-clearfix {
	display: inline-block;
}/* required comment for clearfix to work in Opera \*/

* html .ui-helper-clearfix {
	height: 1%;
}

.ui-helper-clearfix {
	display: block;
}/* end clearfix */

.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter: Alpha(Opacity=0);
}/* Interaction Cues----------------------------------*/

.ui-state-disabled {
	cursor: default !important;
}/* Icons----------------------------------*//* states and images */

.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}/* Misc visuals----------------------------------*//* Overlays */

.ui-widget-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}/*!* jQuery UI Resizable 1.8.20** Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)* Dual licensed under the MIT or GPL Version 2 licenses.* http://jquery.org/license** http://docs.jquery.com/UI/Resizable#theming*/

.ui-resizable {
	position: relative;
}

.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}

.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}

Primefaces 6.0
JSF 2.2
Tomcat 7

User avatar
Melloware
Posts: 1225
Joined: 22 Apr 2013, 15:48

13 Sep 2019, 13:09

1. Why going to 6.0 and not 7.0? You are migrating to a product that is already almost 3 years old?

2. That stylesheet was the old styleheet included with PrimeFaces from inside the primefaces.jar. To me that looks old almost like you still have PrimeFaces 3.X in your classpath?
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.6 / PF Extensions 7.0.2

jenni03
Posts: 8
Joined: 21 Jul 2010, 20:53

13 Sep 2019, 16:33

Thanks for the reply! I'd like to upgrade to primefaces 7, however, I encountered more errors when I switched to version 7. The application code was built on 3.4 years ago by other developers and our group take over this project recently. Currently, the application had already got several functionalities broken after upgraded to 6 such as tree structure was broken(children nodes not generated due to the logic change in the isExpand() method from the new tree API) and "org.primefaces.expression.ComponentNotFoundException" whenever the code tried to update the UI component after some actions done. I've resolved some errors, but I still got some issues to tackle. As we have timeline to finish the migration, I'm concerned that upgrading to newer version means more code need be refactored. Anyway, I will try upgrade to 7 after I resolved some show stopper problems in 6. For the UI problem, I think I should remove this old version of "primefaces.css" file from the project, so the stylesheet in the new primefaces jar file will be used, correct? Your help is much appreciated.
Primefaces 6.0
JSF 2.2
Tomcat 7

User avatar
Melloware
Posts: 1225
Joined: 22 Apr 2013, 15:48

13 Sep 2019, 16:41

Yep I would remove that stylesheet!
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.6 / PF Extensions 7.0.2

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests