I am going to access dialogForm, Here is the code:
<div id="leftDiv">
<div id="dialogDiv">
<p:dialog header="Login" widgetVar="dlg1">
<h:form id="dialogForm">
<h:panelGrid columns="3">
// my components
</h:panelGrid>
</h:form>
</p:dialog>
</div>
</div>
I try:
#leftDiv #dialogDiv #dialogForm{
background-color: red;
}
But not worked.
Two ways:
not recommend
<h:form id="dialogForm" prependId="false">
</h:form>
#dialogForm{
background-color: red;
}
jsf generate id's like formId:component1Id:component2Id and prependId="false" off this behaviour for current form
recommended
<h:form id="dialogForm" styleClass="formStyleClass">
</h:form>
.formStyleClass{
background-color: red;
}
Do not place dialog inside tables, containers likes divs with relative positioning or with non-visible overflow defined, in cases like these functionality might be broken. This is not a limitation but a result of DOM model. For example dialog inside a layout unit, tabview, accordion are a couple of examples. Same applies to confirmDialog as well.
As far as it comes to dialogForm, Id attribute of generated html is different than its JSF representation. You can check out your html id attribute by clicking it and choosing View Source.
Related
I'm working with primefaces on a screen where I used calendar and autocomplete
I got the UI from the designer and started integration, I assigned styles like this
<p:calendar styleClass="xyz" />
the output is
<span id="bla" class="xyz" >
<input type="text" class="some other classes here" />
</span>
so my styles all fail
Now I need to apply styles on input directly instead of the spans
Can you solve it by rearranging your CSS?:
.xyz input {
/* some weird styling here */
}
This is problematic if you rely on Bootstrap CSS for example. Form controls needs the class form-control, but when you add styleClass="form-control" for p:calendar, the surrounding span gets the class instead of the input, which totally messes with the design. I think there should be a inputStyleClass attribute for the p:calendar tag, the same way there is a tableStyleClass tag for p:dataTable.
This worked for me using jQuery to add the form-control class to the input field:
$(".mycalendar input:first-child").addClass("form-control");
p:calendar id="date1" value="#{bean.date1}" styleClass="mycalendar" />
You can use this trick if you are using material design:
:host /deep/ .ui-inputtext{
/* Your Crazy Custom Style*/
}
My objective is simple enough i just want to modify Title="New" to bigger size and color, i did apply with CSS but it doesnt works :(
<style type="text/css">
#g_523a7cea_3249_4ac1_b2bc_48efea016ad1
{
color: Blue;
}
</style>
<WebPartPages:DataFormWebPart runat="server"
Description="" ListDisplayName="" PartOrder="2"
Default="FALSE" HelpLink="" AllowRemove="True" IsVisible="True"
AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True"
DataSourceID="" Title="News" ViewFlag="8" NoDefaultStyle="TRUE" AllowConnect="True"
DisplayName="Employee News" PageType="PAGE_DISPLAYFORM" FrameState="Normal"
PageSize="-1" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default"
DetailLink="" ShowWithSampleData="False" ListId="645a16cc-7fe6-4247-9800-2170e1479074"
ListName="{645A16CC-7FE6-4247-9800-2170E1479074}" FrameType="Default" PartImageSmall=""
IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False"
AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId=""
InitialAsyncDataFetch="False" CssStyleSheet="" MissingAssembly="Cannot import this Web Part."
HelpMode="Modeless" ListUrl="" ID="g_523a7cea_3249_4ac1_b2bc_48efea016ad1"
ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True"
IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{A7755E5E-BE3F-4415-A163-BAA925625A0E}"
__AllowXSLTEditing="true" WebPart="true" Height="" Width="">
The ID is for the DVWP. There is no style that you can apply to a whole DVWP in one fell swoop. Inside the DVWP there will be lots of other CSS classes for the different elements and they will be applied, overriding anything, even if you could use the web part ID for a CSS format.
A DVWP typically displays in a table. There are different classes and styles for TH, TR, TD and so on. If you want to change the appearance, then you need to tackle these classes for the table elements.
replace script with style. script is for javascript. style is for css
<style type='text/css'> ... </style>
Render the page and see what ID you have in your HTML code, then apply the CSS. I'm almost sure that the ID is different, and that's why it doesn't work (happens almost everywhere, where web controls are being used, especially in ASP).
how can i set the header style of the p:panel component? i want to set the height of the panel_header div.
<p:panel id="panel"
toggleSpeed="500" toggleable="true">
<f:facet name="header" >
<p:outputPanel style="float:left;">
<p:commandButton process="#this" id="new"
oncomplete="dialog.show();" icon="ui-icon-plus" />
<p:spacer width="15px;" />
</p:outputPanel>
<h:outputLabel value="Title" />
</f:facet>
</p:panel>
You normally use CSS for styling. Use the .ui-panel .ui-panel-titlebar selector. You can find the CSS selectors and all its properties in every bit decent webbrowser developer toolset. In Chrome, IE9 and Firebug, rightclick the titlebar and choose Inspect Element or press F12.
Here's an example how it look like in Chrome:
To start, you could set the padding to 0.
.ui-panel .ui-panel-titlebar {
padding: 0;
}
Put this in a .css file which you load by <h:outputStylesheet> inside <h:body>, so that it get loaded after PrimeFaces default CSS.
See also:
How do I override default PrimeFaces CSS with custom styles?
Enclose the p:panel in <h:form prependId="false">.
Then you can use the ID selector (as mentioned in the other reply), as the id will not change.
.ui-panel-titlebar {
//Your style-sheet code
}
Adding a header facet to the panel is a good solution if you just need to change one panel. Inside the facet add any styling you require.
<p:panel>
<f:facet name="header" style="font-size: medium">
</f:facet>
</p:panel>
I avoid messing with the primefaces styling as much as possible if I just want to change individual components.
I use PrimeFaces 1.1 with JSF 1.2.
I need to change the style of PrimeFaces <p:lightBox> overlay that has a black border to blue, but the style attribute of the component don't change the overlay, but only the link from which the lightbox is been called.
<p:lightBox width="50%" height="25%"
style="border: 5px; border-style: solid; border-color: blue;">
<h:outputLink value="#" title="Leo Messi" >
<h:outputText value="The Messiah"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/images/barca/messi.jpg" />
<h:outputText style="color:#FFFFFF"
value="Messi is an unusual player. He is highly creative, and has the skills to take on defenders with ease. He is a versatile left-footed player who can play either in the middle or on either wing, or even as a centre forward.
Although he is quite short, he is so fast and physically strong that he can cope with larger opponents. He is incredibly powerful, and a specialist in such dead ball situations as corners, free kicks and penalties.
Leo Messi is cool-headed and able to assume several responsibilities in times of need. He is a player who is destined to have a very successful career in football."></h:outputText>
</h:panelGrid>
</f:facet>
</p:lightBox>
If I am not wrong that is the <a> tag generated. I don't know if you can add any attributes to lightbox's <div>.
I don't have your HTML code generated, but you can do this:
Use Google Chrome to inspect lightbox (right click on lightbox and inspect element) to view <div>'s class.
Add a new "onclick" attribute to <a> and using javascript restyle the elements...
But you should modify primefaces's css from the jar file... I don't find the javascript method elegant...
I have a jqGrid which works fine when displayed on a page on its own.
If I try to display the same grid inside jQueryUI tab, it still works fine – except that font size is wrong. What is happening is this:
When everything is working on a standalone page, the font size is picked up as follows:
Inherited from div#gbox_datatable.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all, in file ui.jqgrid.css line 2
.ui-jqgrid{
font-size:11px;
}
When the grid is placed inside a jQueryUI tab, howerver, it is overridden by a higher priority CSS command as follows:
Inherited from div#gbox_datatable.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all, in file jquery-ui-1.8.9.custom.css line 60
.ui-widget .ui-widget{
font-size:1em;
}
In other words, the fact that I have a ui-widget inside another ui-widget is overriding the desired font specifier.
How can I avoid this overriding?
I found same question at here without any answers.
Any help will be appreciated...
ui.jqgrid.css has the following definition
.ui-jqgrid {position: relative; font-size:11px;}
So if you add class "ui-jqgrid" to the div which holds the tabs the problem will be solved:
<div id="tabs" class="ui-jqgrid">
<ul>
<li>Results</li>
<li>Software</li>
</ul>
<div id="results" class="tabcontain"></div>
<div id="log" class="tabcontain">
<table id="grid"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
</div>
In the example above div with two tabs will be used: one with some general information and another with the the id="grid".
One more simple way will be just set
html, body { font-size: 75%; }
which set will reduce default font size of the page (1em) to the same which jqGrid uses (11px).
See one more way in the resent question.