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.
Related
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;
}
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.
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
Anyone knows why the font of this elements are not the same?
Using Anchor Element
<a style="font-weight: bold; ">bold</a>
Using Input Button
<input type="submit" value="bold"
style="font-weight:bold; border: none; background-color: transparent" />
That's because the font-family and font-size are different too:
see
http://jsfiddle.net/RQBr3/
vs
http://jsfiddle.net/RQBr3/1/
with font-size and font-family added.