I have a hidden property which is fetched from ebean. how do i pass that color code property to css function?
<h:panelGrid id="testpanel"
columns="#{message.no_of_columns}" rows="#{message.no_of_rows}"
styleClass="dynamicGrid">
<c:forEach items="#{bLDashBoardAction.listBondLoc}" var="item">
<h:panelGroup> <h:outputText value="#{item.rackTagCode}" />
<h:hiddenInput value="#{item.colorEBean.colorCode};" />
</h:panelGroup>
</c:forEach>
</h:panelGrid>
this is my css property,background need to be assigned from panelgrid colorcode
.dynamicGrid td
{
width: 50px;
height: 50px;
border: 4px solid gray;
background:
}
As you're restricted by strange design, your best bet is really to apply the style directly on the cell's content instead.
<h:outputText value="#{item.rackTagCode}" style="display:block;color:#{item.colorEBean.colorCode};" />
The display:block will make it to span the entire cell.
Don't think you can pass from JSF to css , you can create several classes with predefined background color , like .dynamicGridRed and .dynamicGridYellow
and call them conditionally styleClass="#{item.colorEBean.colorCode}"
wher colorCode can return dynamicGridRed or dynamicGridYellow
or something like
styleClass="#{item.colorEBean.useRedCode?'dynamicGridRed':'dynamicGridYellow'}"
another option would be use inline css like:
style="width: 50px;height: 50px;border: 4px solid gray;background:#{item.colorEBean.colorCode}"
INMO , you better not try to manipulate the content of css, just make a bunch of predefined css classes...
but I'm not a css pro , so i might be wrong
Related
i have this menubar in my project, i'm using PrimeFaces for the first time:
<p:menubar styleClass="sso_header ui-widget-header " style="width:99.5%; margin-top: 3px; border-radius: 10px;" >
<p:menuitem value="Test" rendered="true"
style="border: 1px solid; margin-right: 5px;" icon="ui-icon-triangle-1-s" />
<p:menuitem value="LOG IN" rendered="true"
style="border: 1px solid; margin-right: 5px;" icon="ui-icon-triangle-1-s" />
</p:menubar>
I need last menuitem float:right;, at least I tried to include external style in this way:
<h:outputStylesheet name="css/style.css" />
and assign my css class to the menutitem.
I tried inline style whit the !important attribute, nothing works.
After inspect code from browser i noticed that Primefaces assign my style to a <a> inside a <li>.
There is a way to assign float right to that <li> in PrimeFaces?
Thanks in advance.
Check the html code that PrimeFaces is generating and use the css classes to define your styles, for your posted code something like this should work
.sso_header .ui-menuitem.ui-widget.ui-corner-all:last-child {
float: right;
}
I have a List with grouped Object List Items in it. Like here in the Explored App, click on Samples. Now every of those items have a padding of 1rem, given by the css with the selector .sapMLIB.sapMObjLItem .
Now I wanted to reduce the top and the bottom padding to 0.25rem, so I added a
class to the Object and imported a custom css (via manifest.json), all as described in the Walkthrough. It did not work as the normal css overwrites my custom one.
An other try was to add the class sapUiNoContentPadding to the elements, but also the css rules behind that get overwritten by the rules described in the first paragraph.
What am I doing wrong? how to remove that padding without rewriting the renderer?
MyView:
<mvc:View
controllerName="sap.ui.xxxx.someapp.controller.MyList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<StandardListItem title="Titel"/>
<List class="sapUiResponsiveMargin sapUiNoContentPadding"
width="auto"
items="{path : '//elementsSet',
sorter : {
path : 'attribute1}',
group : true
}
}">
<items>
<ObjectListItem title="{= ${attribute1} === '' ? 'Enter Text Please' : ${attribute1}}"
icon="{= ${attribute1} === '' ? 'sap-icon://alert' : 'sap-icon://sys-enter'}"
number="{attribute4}"
numberUnit="$"
numberState="{= ${attribute4} > 10 ? 'Error' : 'Success' }"
type="Active" press="onItemPress"
markFlagged="true" markFavorite="true"
showMarkers="true"
class="sapUiNoContentPadding myownclassforpadding">
<firstStatus>
<ObjectStatus
text="some text" />
</firstStatus>
<attributes>
<ObjectAttribute text="{attribute1}" visible="false"/>
<ObjectAttribute text="{attribute2}"/>
<ObjectAttribute text="{attribute3}" visible="false"/>
<ObjectAttribute text="{attribute4}" visible="false"/>
</attributes>
</ObjectListItem>
</items>
</List>
</mvc:View>
my css
.myownclassforpadding{
padding: 0;
background-color: green;
}
Your CSS class myownclassforpadding will not be used, because CSS from the library is more specific as it uses two classes sapMLIB and sapMObjLItem.
You can make your CSS more specific this way:
.sapMLIB.sapMObjLItem.myownclassforpadding{
padding: 0;
background-color: green;
}
Have a look at the JSBin example.
Try the below selector to override default css.
.sapMLIB.sapMObjLItem.myownclassforpadding{
padding-top: 0.25rem;
padding-bottom: 0.25rem;
background-color: green;
}
If you write !important after the properties you want to change, it will overwrite the sapUI5 class properties.
For example:
.myownclassforpadding{
padding: 0 !important;
background-color: green !important;
}
This will make your padding and background-color properties take precedence over sapUI5.
This is my page structure:
<p:panelGrid>
<p:row>
<p:column>
<p:panelGrid id="innerPg_1">
</p:column>
<p:column>
<p:panelGrid id="innerPg_2">
</p:column>
</p:row>
</p:panelGrid>
I would like to override the padding attribute on the ui-panelgrid-cell class, only for the panelGrid with id="innerPg_1", by making my own css rule.
How can I do that?
Tried with the following rule:
#innerPg_1 .ui-panelgrid-cell {
padding: 1px 1px !important;
}
but it doesn't work. Shouldn't it be a wrong rule?
The produced html part is:
<td role="gridcell" class="ui-panelgrid-cell">
<tabled id="formId:innerPg_1"class="ui-panelgrid ui-widget role="grid">
Well, the id of the component in the produced html isn't innerPg_1, it is formId:innerPg_1.
So, in your css you should use the following rule: #formId\:innerPg_1 .ui-panelgrid-cell {...}. (Don't forget the slash!!)
I'm not sure what are you trying to achieve, but at first, try just to change the background-color, just to check if the rule is being overrided
Also, using styleClass instead of id might be a better option, so you could reuse it for another panelGrid
I need to change the width in p:selectonemenu and i'd like to do it in css.
I tried the following, but doesn't work:
<p:selectOneMenu id="aderenteMenu" required="true"
requiredMessage="Aderente obbligatorio" styleClass="aderentestyle"
value="#{garaManagedBean.selectedGara.aderente.id}">
<f:selectItems value="#{garaManagedBean.listaAderenti}" />
</p:selectOneMenu>
In css file i have:
.aderentestyle .ui-selectonemenu {
width: 300px !important;
}
I don't need to set all p:selectonemenu.
Thanks
I solved in this way. The css file doesn't need to specify .ui-selectonemenu.
.aderentestyle {
width: 300px !important;
}
I can't modify the font size of the itemLabel in selectOneRadio in jsf, I can change color but not the size.
here is my code:
<h:selectOneRadio style="color:red; font-size:7pt;"
value="#{myBean.choice}">
<f:selectItem itemLabel="one" itemValue="1" />
<f:selectItem itemLabel="two" itemValue="2" />
<f:selectItem itemLabel="three" itemValue="3" />
</h:selectOneRadio>
is their any idea to resolve that?
thank you for your help.
My config: jsf 2 and tomcat 7
It should work fine. Please check the generated HTML with help of among others Firebug. The <h:selectOneRadio> generates a HTML <table> element with the labels in <td> elements. Apparently you've in some CSS stylesheet a declaration something like
td {
font-size: 10pt;
}
which get precedence over the inline font-size:7pt; declaration on the <table> element. You'd need to finetune the CSS. This is best to be done by supplying a normal CSS style class (using inline CSS is a bad practice anyway):
<h:selectOneRadio styleClass="choices">
with
.choices td {
color: red;
font-size: 7pt;
}