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;
}
Related
I have 3 buttons
<Button row="0" col="0" text="1" class="nums" style="height: 100;"/>
<Button row="0" col="1" text="2" class="nums"/>
<Button row="0" col="2" text="3" class="nums"/>
I can only get the height to change if I use inline style as button 1, button 2 and 3 rely on the app.css file and ignores the height although the other styles are applied.
.nums{
android-elevation: 4;
background-color: lightseagreen;
border-color: darkolivegreen;
border-radius: 10;
border-width: 5;
color: whitesmoke;
font-size: 24;
font-weight: bold;
height: 100;
width: 100;
}
Your height and width might get overridden by a higher specificity. Inline code basically overrides everything that is not !important, due to the increased specificity.
Also classes with the same specificity will get overridden when declared again after the first declaration. For example another class named .nums which gets processed after your code might interfer.
Simply appending your styles after the framework CSS or loading your custom CSS file after the framework CSS should do the trick.
Firstly, do not sentence case your element definitions: i.e: <button> not <Button>.
Your problem is easily solved:
<button row="0" col="0" text="1" class="nums" style="height: 100px;"/> <-- note the px added.
I'm trying to define a group of buttons that are on top of each other with a black border and in order to have no overlapping borders I want to do something like this:
.myCustomButton {
border: 1.5px solid black;
}
.myCustomButton:not(:last-child) {
border-bottom: none;
}
I've tried a few variations of that and had no success. I assume (after some playing around with it) this is because the elements aren't a "group", so there is no actual last child.
I have tried using the "Field Group Ids" but that didn't change much. Also tried giving the "items" its own class and use :last-child on that but that also didn't work.
<VBox xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" width="auto" direction="Column" id="vbox0_copy2">
<items class="a">
<Button xmlns="sap.m" text="1" id="flight1" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="2" id="flight2" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="3" id="flight3" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
</items>
</VBox>
To my understanding, using standard HTML and css where I define the buttons in the HTML file itself should work it out but as far as I know this is how you are supposed to do it:
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "ExampleScreen2"
})
}).placeAt("content");
});
</script>
So, generally speaking, am I wrong to use only one '.placeAt("content")' or am I missing another way to use :last-child correctly?
What happens is that sapui5 add a 'div' layer for each child of a VBox.
that means the generated html will look like
<div> <-- VBox
<div> <-- item 1 container
<button />
</div>
<div> <-- item 2 container
<button />
</div>
...
</div>
thus your selector cannot target a class set on the item itself (because as you said, they are not sibling in the html tree)
to achieve your goal, set a class on the VBox, like 'myCustomButtonContainer' and then set your css as
.myCustomButtonContainer > .sapMFlexItem {
border: 1.5px solid black;
}
.myCustomButtonContainer > .sapMFlexItem:not(:last-child) {
border-bottom: none;
}
For removing the padding inside a Tab of the Primefaces TabView component, I created a new style on my css file:
.tabviewleft .ui-tabs .ui-tabs-panel {
padding: 0px 0px;
}
Then I tryed to apply this new style to the Tab. But it didn't work:
<p:tab id="fieldCategoryTab" title="category" styleClass="tabviewleft" >
Then I tryed applying on the TabView component. But it didn't work too:
<p:tabView id="tabViewLeft" styleClass="tabviewleft">
Then I created a div outside the TabView and it worked:
<div id="teste" class="tabviewleft">
Why I need to create a div outside the TabView to apply the style?
Is it possible to apply it directly to the Tab or TabView without creating a div?
Thank you in advance for any explanation.
Yes it is possible .
Suppose your <p:tabView>'s structure is like :
<p:tabView id="tabView" styleClass="tabView" dynamic="true"
cache="false">
<p:tab title="#{trhBundle['paidLeave']}" id="paid">
<h:form>
</h:form>
</p:tab>
<p:tab title="#{trhBundle['RTT']}" id="rtt">
<h:form>
</h:form>
</p:tab>
<p:tab title="#{trhBundle['specialLeave']}" id="special">
<h:form>
</h:form>
</p:tab>
</p:tabView>
Then add css
.tabView .ui-tabs-panel {
padding: 0px!important;
}
I think this will remove all padding of <p:tab>.
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
How would I align everything in my below to the far right?
<div id="container">
<h:form id="authenticate">
<h:panelGrid columns="5" cellpadding="6">
<h:inputText id="email" value="" />
<p:watermark for="email" value="Email"/>
<h:inputSecret id="password" value="" />
<p:watermark for="password" value="Password"/>
<p:commandButton id="login" value="Login" align="right"/>
</h:panelGrid>
</h:form>
</div>
The <h:panelGrid> renders a HTML table. You basically want to apply text-align: right; on every <td> element it renders. With the current code, easiest would be to apply the following:
#authenticate table td {
text-align: right;
}
You can of course also be more specific, e.g. giving the <h:panelGrid> its own styleClass and defining a rule in CSS (which would be applied directly on the rendered HTML <table> element).
<h:panelGrid styleClass="className">
with
.className td {
text-align: right;
}
You can also give each <td> element its own class by columnClasses attribute which accepts a commaseparated string of CSS classnames which are to be applied repeatedly on the <td> elements. If you want to apply the same class on every <td> element, just specify it once:
<h:panelGrid columnClasses="className">
with
.className {
text-align: right;
}
As an extra hint: rightclick the webpage in webbrowser and choose View Source, then you'll understand better what JSF is all exactly generating.
actually in same form i used <p:panel> and got good result. looks like ;
<p:panel styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<p:commandButton value="Add New Tab"
actionListener="#{xxx.createNewTab}" process="#this"
update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" />
</p:panel>
A little late, but might help someone, as it was what I needed...
If the alignment is not limited to this specific table, but rather the default format for all table cells, then just add this to your CSS file:
td {
text-align: right;
}
Then, all <td> elements, including those generated by JSF, will be formatted that way.