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.
Related
I'd like to put a conditional styling on a primeng 'p-overlayPanel' element. I have tried:
<p-overlayPanel [styleClass]="#{(bean.comment) ? 'style1' : 'style2'}">, but it's not working.
[ng-class]="bean.comment ? 'style1' : 'style2'" - this is not working either.
Styleclass works only without a condition like so:
<p-overlayPanel [styleClass]="style1"> // html file
p-overlayPanel .style1.ui-overlay { background-color: yellow; } // css file
While [ng-class] doesn't work at all (but works fine on vanilla JS elements). Have I missed something? My questions are following:
Is 'ng-class' not working for some of the elements from ngPrime collection?
How to correctly conditionally apply 'styleClass' for p-overlayPanel element?
I'm using Angular 8.
styleClass accept string as a css class or list of classes and apply to the elemnt at that already have a list of these classes overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow
so if you want to change the background color you have to do it like this
.style1.ui-overlaypanel{
background-color: red;
}
.style2.ui-overlaypanel{
background-color: green;
}
you have to add the class to the global style file not the component style file and if you use style property the value will pass to ngStyle directive.
demo 🚀
🦑 overlaypanel.ts
Updated 🌟
you can use ngClass but the style must be change like the example below , because now the css classes will apply to the element directly.
.style1 .ui-overlaypanel{
background-color: red;
}
.style2 .ui-overlaypanel{
background-color: green;
}
demo 🥈
You can use [ngClass] like this:
<input pInputText [ngModel]="vendor.iban" name="pIban" #pIban="ngModel" (click)="some(pIban)" class="col-md-7 ui-inputtext ui-widget ui-state-default ui-corner-all " [ngClass]="{'errorVendor': vendor.iban=='' && pIban.touched}" />
I'm trying to change the styles of a vuejs-datepicker (https://www.npmjs.com/package/vuejs-datepicker)
<datepicker
format="dd/MM/yyyy"
calendar-class="my_calendar"
input-class="textfield"
name="my_date" />
In the styles section I define this rule, but my datepicker doesn't change the width
.my_calendar {
width: 100px !important;
}
Any idea? Or other plugin for use a datepicker in vuejs?
Thanks
I have faced the same problem and the defaualt css does not works when it is scoped.Now,do the following steps to apply styling to Vuejs date picker and time picker
use input-class="--your--class--name--here " in the place of class
beneath your scoped style tag use another style tag which should not be scoped
`
<template>
<div>
<datepicker
v-model="startDate"
input-class ="my-picker-class"
placeholder="Start Date"
</datepicker>
</div>
</template>
<style>
.my-picker-class{
border: none !important;
border-bottom: 1px solid #F26F31 !important;
}
</style>
`
3. Here i have used my class name .my-picker-class and applied styling there , dont forget to give that "!important" at the end of the styling
Try /deep/ to change css property from parent :
/deep/ .className {
Css property
}
Try adding module style. You want to add styles to calendar-class. So try it this way:
<datepicker :class="$style.input" inputClass="input" />
<style module>
input {
width: 100%;
cursor: default;
}
</style>
Note: I was facing a similar issue with input class. This worked out for me.
CSS for vuejs datepicker can be passed as a prop. There are 3 props, wrapper-class, input-class and calendar class. For example
<datepicker input-class="rounded w-1/2" calendar-class="rounded"></datepicker>
Note: Tailwindcss classes used here.
I created collapsible sidebar.In side the sidebar that content automatically taken ant design padding value(16px)at the top,right,bottom and left .I need to remove this automatic padding
render() {
return (
<div className="common-coll-bar">
<Collapse >
<Panel header="Present Staffs" style={customPanelStyle}>
<p style={{ height: 550, color: '#131D43', background: '#607B7E', padding: 0 , margin: 0 }}> {text}</p>
</Panel>
</Collapse>
</div>
);
}
Can you help me?
You would have to manually overwrite the styling.
You can add a custom class to panel:
<Panel header="This is panel header 1" key="1" className="custom">
and Add less:
.custom {
.ant-collapse-content-box {
padding: 0;
}
}
https://codepen.io/kossel/pen/gooQqv
You need to theme antd. Doing the proposed solution by Yichaoz will just work for element that holds that class. Which will be harder to maintain, will require extra work, as you need to add that class to every element.
You need to read this https://ant.design/docs/react/customize-theme for a proper solution.
Using CSS modules:
.collapsePanel {
:global(.ant-collapse-content-box) {
padding: 0 !important;
}
}
import the file and use like:
<Collapse className={css["collapsePanel"]}>
...
For me worked only like this with antd#v5.x
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
I've got CSS that looks like this:
a.HyperLinkHover
{
color: #95FBCF;
background-color:#ff0;
background-color: #377CB1;
}
a.HyperLinkHover:visited { color:Purple;}
But when I click my <asp:HyperLink> where it is defined as:
<asp:Hyperlink runat=server id=hlfile cssclass=HyperlinkHover />
it does not have a purple color for being visited.
I assume I did it wrong ?
unless you have a copy paste error then your cssClass doesnt match the CssDefinition
One has an uppercase Link and the other has a lower case link in HyperLinkHover
a.HyperLinkHover {
color: #95FBCF;
background-color:#ff0;
background-color: #377CB1; }
a.HyperLinkHover:visited { color:Purple;}
/* hover style would come after visited */
and make sure the CssClass is defined with the same capitalisation
<asp:Hyperlink runat=server id=hlfile cssClass="HyperLinkHover" />