How can I hide this alert in my beanedit form. It's really annoying.
I tried with this css code but it didn't work.
.alert-dismissable .alert .alert-danger{
display: none !important;
}
I fixed it.
In my css file I added
.bean > .alert{
display: none !important;
}
After that I just added the class bean to the form.
Thats it no more alerts.
Related
I want to show a WebPage on another WebPage using InlineFrame.
I initialized it like this:
Wicket/ Java:
InlineFrame choosenTestcaseInlineFrame =
new InlineFrame("inlineFrame", AuthenticationPage.class);
public WhatToDoPage() {
Form whatToDoForm = configureWhatToDoForm();
add(whatToDoForm);
add(choosenTestcaseInlineFrame.setOutputMarkupId(true));
add(choosenTestcaseInlineFrame);
}
'
HTML:
<iframe wicket:id="inlineFrame" style="margin-left: 200px; height: 500px; width: 1000px">
The Problem is That the InlineFrame seems to refuse to show the Content.
here is a Screenshot:
I don't know if Chrome has a specific option to allow iframe to be displayed, but you might find some clues to solve the problem here:
iframe refuses to display
I'm finding a behavior that's really strange (at least, on the CSS side) in the CellTable component of GWT.
Suppose we examine the following CellTable demo: http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCellTable
If I try to add ellipsis to the header (TH tags) only by using CSS, by the following code (we can try to add this in the clean.css file directly in the Developer tools of browser):
th {
text-overflow: ellipsis;
overflow: hidden;
width: 50px;
display: inline-block;
white-space: nowrap;
}
This works with a normal HTML test page (according to this question), but not in this case: the headers will break into newlines instead.
I can't figure out which CSS properties of the elements have interfered with this simple approach.
Sorry for the simple question, but I'm learning CSS and try to experiment more with it, thus thanks in advance for any support.
Otherwise, I can try to solve this on the Java side, and custom the header with a builder.
I have a <p:menubar> in a xhtml template. The div that surrounds it has these CSS properties:
position: fixed;
top: 44px;
width: 100%;
So I can fix the menu header while user scrolls down the page.
The problem now is that some Prime Faces component have icons and headers overflowing the menu.
I tried to work with z-index but no success. I imagine that there is another solution in PrimeFaces instead of z-index.
Thanks a lot.
According to the PrimeFaces default style sheet primefaces.css, the <p:message(s)> icon is relatively positioned.
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
background: url("/omnifaces/javax.faces.resource/messages/messages.png.xhtml?ln=primefaces") no-repeat;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
}
I'm in first place not sure why it's relatively positioned as it doesn't seem to need to be offsetted nor have any absolutely positioned children. Perhaps it's been used as some (most likely IE-specific) workaround/hack for something else (if this was "has layout" related, the developer would better have used overflow: hidden instead for this). So just making it the default position: static should fix it.
Add the following to your override stylesheet to achieve this:
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
position: static;
}
Alternatively, you could of course also set z-index of the menu with an insane high value, as you figured out yourself. I wouldn't consider this a reliable solution though, this is too much a workaround/hack.
Resolved it by setting the z-index: 9999999 to the <p:outputPanel> sorrounding the menu instead of setting the style property in the menu.
I am using GWT/GXT.
i have used GWT's grid and each row is highighted in background color using CSS. but applied css is not printed in printed page. how can i print with css?
I am calling Print functionality as below:
Print.it("<link rel='StyleSheet' type='text/css' media='paper' href='mainApplication.css'>", DOM.getElementById("myId"));
in mainApplication.css i placed style as below:
#media print {
print_background {
background-color: #EBECE4 !important;
}
}
is my CSS style correct? Please help me.
in the code :
i created a horizontal panel and added GWT grid to it as below.
HorizontalPanel recordsPanel = new HorizontalPanel();
//GWT grid is created and the same is added to recordsPanel
recordsPanel .add(grid).
i applied css style for grid rows as below:
recordsGrid.getRowFormatter().addStyleName(i, "print_results_background");
Now i want to print the records with css style.
Thanks!
You CSS style isn't correct for a trivial issue: lack of dot (.) before print_background class. Correct code is:
#media print {
.print_background {
background-color: #EBECE4 !important;
}
}
paper is not a valid value for the media attribute. Correct your link tag as follows:
<link rel='stylesheet' type='text/css' media='print' href='mainApplication.css' />
Ignoring other syntactic mistakes as mentioned by other posters, please refer to RAS's comment on the question also (regarding the differing class name).
Reference
Media Types on W3C
I think you are missing in the css to specify if print_background its an id # or a class .
Doing some application in JSF PrimeFaces 3.1.1 (still learning) and I implemented full page layout - Sunny (the <p:layout /> tag). Everytihng is fine, except my menu bar.
On hover on the submenu button in the menu, the dropdown submenu shows, but when I want to go by mouse to the submenu, it disappears. The only option is to change the mouse position to the submenu very fast - than it stays. And thats the problem, need it to work normally, not dissappearing.
If I put the layouts out, the menubar works well again. Also tried to copy & paste code from PF showcase, issue was the same.
Using JSF 2 on Tomcat 7.0.22.0. Here is something of my code...
The menubar in a template:
<p:layoutUnit position="north" size="130">
<ui:insert name="top">
<p:menubar id="mainMenu" model="#{menu.mainMenu}" />
</ui:insert>
</p:layoutUnit>
The CSS solving overflow problems:
.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}
.ui-layout-north {
z-index: 30 !important;
overflow: visible !important;
}
Thanks for help!
Did you happen to set a custom font size for your ui-widget? Personally, I had the following CSS setting:
.ui-widget {
font-size: 12px !important;
}
and I experienced similar issue like yours in Firefox (but not in Chrome). Oddly enough, after increasing font-size to 13px the problem was fixed.
The menubar works in IE or Chrome but in firefox don't show correctly you can see that in Check this with firefox a see what happen :)
I solve this problem with
.ui-menubar .ui-menuitem-text {
font-size: 13px!important; top: -1px;
}
This is not ideal but it solved the problem for me:
.ui-menuitem-link
{
max-width: 180px;
}
Please view next link http://forum.primefaces.org/viewtopic.php?f=3&t=16597.
It's a matter of font with.
This appear also in Firefox 27 and Prime Faces 4.0 RC.
In other browsers works well.