I am only using HTML to create forms for our EMR. When I create a page, and declare it as
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
This statement in my CSS stops working
.overflow { overflow:visible; }
The intended effect is to have a text area that shrinks to fit the text entered when printed. I have Googled the issue to the best of my abilities and tried every incarnation I could find.
Related
I want to change the size of a PrimeFaces component. For example, a <p:orderList>. It has a class called ui-orderlist-list which is defined in primefaces.css with a fixed 200x200 dimension. No matter what I do in my theme.css, it is overwritten by this attribute and there is no way I can make the content part of a <p:orderList> wider.
For other components I might want to override just one instance of a component, not all.
Can anyone please tell me how can I do all this?
There are several things you need to take into account of which one or more might be relevant you your specific case
Load your CSS after PrimeFaces one
You need to ensure that your CSS is loaded after the PrimeFaces one. You can achieve this by placing the <h:outputStylesheet> referencing your CSS file inside <h:body> instead of <h:head>:
<h:head>
...
</h:head>
<h:body>
<h:outputStylesheet name="style.css" />
...
</h:body>
JSF will automatically relocate the stylesheet to the end of the generated HTML <head> and this will thus ensure that the stylesheet is loaded after the PrimeFaces' default styles. This way the selectors in your CSS file which are exactly the same as in PrimeFaces CSS file will get precedence over the PrimeFaces one.
You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> which is understood by PrimeFaces-specific HeadRenderer, but this is unnecessarily clumsy and would break when you have your own HeadRenderer.
Understand CSS specificity
You also need to ensure that your CSS selector is at least as specific as the PrimeFaces' default CSS selector on the particular element. You need to understand CSS Specificity and Cascading and Inheritance rules. For example, if PrimeFaces declares a style by default as follows
.ui-foo .ui-bar {
color: pink;
}
and you declare it as
.ui-bar {
color: purple;
}
and the particular element with class="ui-bar" happen to have a parent element with class="ui-foo", then the PrimeFaces' one will still get precedence because that's the most specific match!
You can use the webbrowser developer tools to find the exact CSS selector. Rightclick the element in question in the webbrowser (IE9/Chrome/Firefox+Firebug) and choose Inspect Element to see it.
Partial overriding
If you need to override a style for only a specific instance of the component and not all instances of the same component, then add a custom styleClass and hook on that instead. It is another case where specificity is used/applied. For example:
<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
border-style: none;
}
If a component does not support a styleClass and you are on jsf 2.2 or up, you can also use passtrough attributes and add a pt:class and have it end-up on the output.
<p:clock pt:class="borderless" />
Never use !important
In case you fail to properly load the CSS file in order or to figure the right CSS selector, you'll probably grab the !important workaround. This is Plain Wrong. It's an ugly workaround and not a real solution. It only confuses your style rules and yourself more in long term. The !important should only be used in order to override the values hardcoded in HTML element's style attribute from a CSS stylesheet file on (which is in turn also a bad practice, but in some rare cases unfortunately unavoidable).
See also:
How to reference CSS / JS / image resource in Facelets template?
Mozilla Developer Network > CSS > Specificity (great article, a must read!)
Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade
you can create a new css file for example cssOverrides.css
and place all the overrides you want inside it, that way upgrading the primefaces version wont affect you ,
and in your h:head add something like that
<link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />
if it wont work try adding it to the h:body
in order to check if its working try this simple example inside the css file
.ui-widget {
font-size: 90% !important;
}
this will reduce the size of all primefaces components /text
I'm using PrimeFaces 6.0. Here's some information I would have liked to have regarding this:
If you use <h:outputStylesheet/>, it will work, but your CSS will not be loaded last even if it's last in the <h:head></h:head> tags (other CSS files will be included afterwards). A trick you can do which I learned from here is to place it inside <f:facet name="last"></f:facet>, which must go inside the body, like so:
<h:body>
<f:facet name="last">
<h:outputStylesheet name="css/MyCSS.css" />
</f:facet>
...
Then your CSS will be the last loaded. Note: you will still have to adhere to the specificity rules as BalusC outlined.
I placed "MyCSS.css" in WebContent/resources/css/.
More information on the resource loading order: http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces
Load your CSS after PrimeFaces?
Although loading your CSS after the PrimeFaces CSS will override existing rules, I don't thinks it's a good idea. It's better to create more specific rules. More specific rules will always "win", no matter what the order is. If you for example would be using a combined resources handler in combination with PrimeFaces Extension LightSwitch, the switched PrimeFaces theme will be loaded last, making it "win" with equal rules!
How to create more specific rules
The style rules used by PrimeFaces can be quite complex. An element can receive its styling from multiple CSS rules. It's good to know you can use filtering in the DOM inspector's style tab to search on the property you want to customize:
This screenshot was taken using Chrome, but filtering is also available in Firefox and Safari.
When you have found the rule you want to customize, you can simply create a more specific rule by prefixing it with html. For example, your could override .ui-corner-all like:
html .ui-corner-all {
border-radius: 10px;
}
Use a different theme
Sometimes it's just easier to switch to a different theme and start from there. Have a look at the themes in the showcase.
You might also consider buying a premium theme (disclaimer: I'm not employed by PrimeTek). You can find an overview of templates in the showcase as well.
Using the style attribute
PrimeFaces components can render quite complex HTML. Normally, the style attribute is only applied to the most outer HTML node that the component renders. Also, style is not reusable, so it is better to set a styleClass and create CSS rule(s) based on the class you've set. This also allows you to style inner HTML nodes rendered by the component.
Using the styleClass attribute
PrimeFaces comes with themes (and templates) which have many built in classes. You might find that an existing class will already do the customization you has in mind. For example to remove borders from a p:panelGrid one can simply apply the class ui-noborder. Or the classes that we recently added to PrimeFaces 10 to style buttons, like ui-button-warning.
If you are using PrimeFlex, you can use its classes on components to apply certain styles.
See:
How to remove border from specific PrimeFaces p:panelGrid?
https://www.primefaces.org/showcase/ui/button/commandButton.xhtml
Override a single instance of a component
If you want to override the style of a single instance, use the styleClass attribute to add a CSS class to that instance. You can now use the CSS class you've added in your CSS selectors to create styles.
Replace theme values using a ResourceHandler
I usually just want to replace some color with another value. As colors can be used in many different rules it can be useful to create a ResourceHandler.
In the handler check for the PrimeFaces theme:
#Override
public Resource createResource(String resourceName,
String libraryName) {
if (isPrimeFacesTheme(resourceName, libraryName)) {
return new MyResource(super.createResource(resourceName, libraryName), this);
}
else {
return getWrapped().createResource(resourceName, libraryName);
}
}
protected boolean isPrimeFacesTheme(final String resourceName,
final String libraryName) {
return libraryName != null
&& libraryName.startsWith("primefaces-")
&& "theme.css".equals(resourceName);
}
In the resource, replace the color:
private static String cache;
public MyResource(Resource wrapped, ResourceHandler handler) {
this.wrapped = wrapped;
this.handler = handler;
this.charset = Charset.forName(FacesContext.getCurrentInstance().getExternalContext().getRequestCharacterEncoding());
}
#Override
public InputStream getInputStream() throws IOException {
if (cache == null) {
cache = readInputStream(getWrapped().getInputStream());
// Replace values
cache = cache.replace("#007ad9", "#11dd99");
}
return new ByteArrayInputStream(cache.getBytes(charset));
}
And register it as follows in the faces-config.xml:
<application>
<resource-handler>com.example.MyResourceHandler</resource-handler>
</application>
A resource handler which replaces the accent colors of the Arya, Saga and Vela themes with CSS variables is available in PrimeFaces Extension 10.0.1, see https://www.primefaces.org/showcase-ext/sections/utils/themeAccentColorResourceHandler.jsf.
For more information on resource handlers see:
How to load dynamic resources in JSF?
Following the same idea of the accepted answer but without using
<h:outputStylesheet>
and using templates and I must to achieve the goal of load the .css files after the own of Primefaces but at the header block of the page.
template.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
<h:head>
<title><ui:insert name="title">TEST</ui:insert></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<ui:insert name="headcontent"></ui:insert>
</h:head>
<h:body>
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom"></ui:insert>
</div>
</h:body>
</html>
main.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://xmlns.jcp.org/jsf/jstl/functions">
<ui:define name="title">TEST</ui:define>
<ui:define name="headcontent">
<link type="text/css" rel="stylesheet" href="../resources/css/index.css"/>
</ui:define>
<ui:define name="content">
...
</ui:define>
<ui:define name="bottom">
...
</ui:define>
</ui:composition>
These is an example of how to insert source .css or .scripts files using
<ui:insert>
and
<ui:define>
and as a result the custom .css or .js files are loaded after Primefaces ones and if you look the page info at the browser you can see that these lines are inserted at the end of the header block of the page.
I have a strange behavior that in my ASP.NET MVC project when I apply inline styling to html elements - they are not shown in the browser. But if I put the same styling in an external css file using a css class it will work (even putting the css class in a <style> tag on the same page doesn't work.
Example:
NOT Working
<div style="height: 100px; width: 100px; background: red;">
ABC
</div>
NOT Working
<!DOCTYPE html>
<html>
<head>
<style>
.myClass {
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="myClass">
ABC
</div>
</body>
</html>
Working
mystyle.css
.myClass {
height: 100px;
width: 100px;
background: red;
}
index.cshtml
<div class="myClass">
ABC
</div>
If I don't use a cshtml file and just load a static html file then all variations work.
Why is that? How do we fix it?
At the end of the day, what truly matters in this case is the code that's sent to the browser, not the backend means that was used to send the code to the browser. If it works when you send it via an html page but it doesn't work when you send it via a cshtml page then something different is being sent to the browser in these two cases.
So the key to understanding the issue is to figure out what's different. Use developer tools to view source on the page sent via the html page, and view source on the page sent via a cshtml page. Compare the html sent in both cases. Given that the sample code is quite small it should be easy to spot the difference. Once you find the difference, you will have a good clue as to what's going on.
Your code sample doesn't contain anything related to MVC, therefore it should be sent "as is" to your browser.
So if it works in a simple .htm file (and it is), it will also work in a .cshtml, unless you forgot to tell us something about "what is not working".
Depending of your browser, you can use F12 or Ctrl U (etc) key to see page source, and check if it matches what you put in your editor.
You can also use Developer tools, or Firebug in Firefox to examine exactly which style is applied to which element.
Also, if your sample is not complete, your MVC website is maybe using some features as a layout page and some default CSS which prevent your inline style to do exactly what you were expecting.
I need to override some <style> elements within my Razor page so I've inserted the styles immediately after the opening code block:
#{
ViewBag.Title = "New Account";
Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
#main
{
height: 400px;
}
</style>
The page renders correctly in the browser but Visual Studio green squiggles at <style> complaining that:
<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>
I've doublechecked the master page - no problems highlighted there.
What's Visual Studio expecting at this point? What's the correct way to override styles on a page by page basis? Via jQuery?
The style element cannot be nested under the <body> or child elements of the <body>, instead it should go to the <head> element of the page.
If you try to override the styles like this, they get inserted into the default section of your layout page by #RenderBody(), which I assume is inside the <body> of the layout page, while the default styles still stay in the <head>.
The proper way to override some part of the layout page from the content page would be something along these lines, using Razor sections:
_layout.cshtml
<head>
#if (IsSectionDefined("Style"))
{
#RenderSection("Style");
}
else
{
<style type="text/css">
/* Default styles */
</style>
}
</head>
<body>
#RenderBody()
...
page.cshtml
#{
Layout = "layout.cshtml";
}
#section Style
{
<style type="text/css">
#main
{
height: 400px;
}
</style>
}
<!-- Body content here -->
...
Now if the Style section is defined on the content page, its contents will override the defaults from the layout page.
I suggest you read more on Razor layouts and sections. A nice article on this by ScottGu can be found here.
Regarding Visual Studio markup validation warnings
Visual Studio has a problem when markup that makes up a single page is being split up between different files like this. In most cases there is no way for Visual Studio (or any such IDE for that matter) to know how the different page fragments will be dynamically put together in the end. So usually you can't avoid some of these warnings on a project.
Personally I would ignore the warnings if I know what I'm doing and the resulting pages pass the markup validation (http://validator.w3.org/).
If you really want to hide the warnings, you need to disable the appropriate validation options in Visual Studio. E.g. for HTML in Visual Studio 2012 this can be done in Tools > Options > Text Editor > HTML > Validation.
This appears to be a quirk of using Razor. The validator can't "see" the overall HTML because it's scattered across multiple files using Razor logic to piece it all back together again.
The trick I just figured out is to "hide" the <style> and </style> from the validator. Instead of:
<style>
use:
#MvcHtmlString.Create("<style type\"text/css\">")
And instead of:
</style>
use:
#MvcHtmlString.Create("</style>")
The validator doesn't understand these lines are generating <style> and </style>, so it stops complaining about them.
Make sure you're using a #section XXX around the <style> element where "XXX" is referencing a #RenderSection(name: "XXX", required: false) in a master file that is within the HTML <head> element. This is necessary to make sure the <style> element gets inserted in the <head> element where it belongs.
I've seen this happen on my projects as well. Fortunately, when you run the program, it figures itself out and everything should render as expected.
Due to the separation of content at design time, I believe a few of the warnings from razor pages can be safely ignored.
If the CSS isn't actually being recognized, make sure to add that to the question, but if all you're doing is trying to get a perfect no warnings build, then you might just have to set VS to ignore parser errors such as these.
I think you should be set style in HeadContent
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.hideGridColumn {
display: none;
}
</style>
</asp:Content>
That good for me.
The style tag should be in the head tag, not in the body tag.
You should make a region in the head tag in your layout, and put the style tag in that region.
If you ViewSource one the page as it appears in the browser have you got
<style type="text/css">
//some other style stuff, then
<style type="text/css">
#main
{
height: 400px;
}
</style>
</style>
As that's what the validator implies.
If the page passes a W3 validation test, just ignore VS. I think it struggles a bit with Razor.
i m trying to pickup contents of a div and open it in new window using window.open so user can print this printer friendly page. i have got the code somewhere on the net and made some modifications. below is the code snippet
function printpage() {
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById("memo_data").innerHTML;
var somestyle = '<style type="text/css"> #memotxt p {padding:0 0 0 0;margin:5px 0 0 0;}</style>';
var docprint=window.open("","sa",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Inter Office Memo</title>');
docprint.document.write('<link type="text/css" rel="stylesheet" href="../../Content/style.css"');
//docprint.document.write(somestyle);
docprint.document.write('</head><body><fieldset style="border:none;"><div class="memo-report-top"');
docprint.document.write(content_vlue);
docprint.document.write('</div></fieldset></body></html>');
docprint.document.close();
docprint.focus();
}
when i open this page in firefox it works exactly the way it is supposed to but when i open page in IE8 and press print button that triggers printpage() function. a new window pops up with ugly looks. i have also called a css file in printer friendly page but when i examine it in IE8 developer tool it shows me just css properties applied on body and fieldset. rest of properties are not there.
suggestions and help are highly appreciated
thanks
the div tag was left open in the following code line
docprint.document.write('</head><body><fieldset style="border:none;"><div class="memo-report-top"');
closing it resolved the problem
thanks everyone for ur input
regrds
adeel
I have a master page that contains an ASP.NET server side Menu control (System.Web.UI.WebControls.Menu)
I am using the CSSFriendly adapters from here
http://www.asp.net/CSSAdapters/Menu.aspx
and they do make the rendered HTML much cleaner however I am still getting inline styles output into the HEAD element in the HTML like this
<style type="text/css">
.ctl00_SiteHeader1_TabBar1_Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_SiteHeader1_TabBar1_Menu1_1 { text-decoration:none; }
.ctl00_SiteHeader1_TabBar1_Menu1_2 { }
.ctl00_LeftColumnContent_LeftHandNavigator1_Menu1_0 { text-decoration:none; }
</style>
</head>
<body>
I thik these styles are being generated by ASP.NET, I don't think I need them as I am using the CSSAdapters so is there any way of stopping them from being generated?
Derek
In .NET Framework 4, ASP.NET menu has a new property, IncludeStyleBlock, that you can set to false to avoid generation of <style> block. However, it still generates a style="float:left" attribute that can only be overridden with a float: none !important in your stylesheet.
The short story is that it isn't easily accomplished. That code is added to the header by the menu during the prerender phase.
A possible workaround might be overriding the menu's onprerender in a custom menu control and don't call base. You could then replace the default menu control with your own using tagMappings.
I'd suggest you stay clear of the menu control if you can.