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.
Related
In Ionic, the ion-title component has the content encapsulated in an extra div within its shadow-dom.
This div has the class .toolbar-title set. How can i select this div via scss-selector to change its overflow behavior?
I tried:
.toolbar-title { ... }
ion-title .toolbar-title
ion-title::shadow .toolbar-title { ... }
ion-title::shadow(div) { ... }
and a lot other combinations including :host & ::ng-deep selectors.
And, yes i know , ::shadow and ng-deep is deprectaded.
I also know that ionic has introduced css-variables for this purposes, but unfortunatley not for the overflow attribute.
THX in advance!
The concept of shadowDOM is you can't touch its content with CSS from the outside.
It is an open shadowDOM, so you can change it with JavaScript.
document.querySelector("ion-title")
.shadowRoot
.querySelector(".toolbar-title")
.style
.overflow = "initial";
Ionic v6 allows you to target and modify shadowDOM contents with CSS. See https://ionicframework.com/docs/theming/css-shadow-parts
However, the element you want to select inside the shadowDOM needs to expose a part attribute. For instance the ion-select element:
<ion-select>
#shadow-root
<div part="placeholder" class="select-text select-placeholder"></div>
<div part="icon" class="select-icon"></div>
</ion-select>
You can select the placeholder element with:
ion-select::part(placeholder) {
color: blue;
opacity: 1;
}
Unfortunately, the ion-title element does not expose any shadow parts. You need to wrap the contents of ion-title in a container to be able to modify them:
<ion-title>
<div class="content">
<img src="..." />
Hello World!
</div>
</ion-title>
CSS:
.content {
display: flex;
align-items: center;
}
StackBlitz example: https://stackblitz.com/edit/ionic-title-modification-8a1qst
I am using b-tooltip tags of BootstrapVue to show information. I want to increase the width of b-tooltip (for long text message), text alignment, etc . How can i do it (basically how can i style it)?
<b-button id="tooltip-target-1">
Hover Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="hover">
I am tooltip <b>component</b> content!
</b-tooltip>
If you're using SCSS in your project, then the easiest way for a global solution would be to modify the SCSS variables to your liking.
If you want to only apply styles to a specific tooltip, or apply something there isn't a variable for. You can use the custom-class prop on b-tooltip to supply it with a custom class, which allows you to style it to your liking.
If you're placing this CSS in a scoped style tag <style scoped> you will need to use a deep selector to target the subcomponents such as .tooltip-inner.
new Vue({
el: '#app',
})
.custom-tooltip > .tooltip-inner{
/* Removes the default max-width */
max-width: none;
/* Apply whatever other styles you want */
font-size: 150%;
padding: 10px;
}
/* This styling is just for the example */
#app {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.14.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.14.0/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-button id="tooltip-target-1">
Hover Me
</b-button>
<!-- Use the variant prop to use your theme colors -->
<!-- If you want a custom color, you can use CSS -->
<b-tooltip target="tooltip-target-1" variant="primary" custom-class="custom-tooltip" triggers="click">
I am tooltip <b>component</b> content!
</b-tooltip>
</div>
</div>
The trick to change styles of bootstrapvue tooltip.
<style>
.tooltip-inner {
max-width: 800px;
}
</style>
Don't use scoped in style because the component render the html of tooltip outside of app so if you put scoped your css will not work.
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 have a Home component with this inside:
<alert type="info">Hello from ng2-bootstrap</alert>
Inside my home.style.scss, I have this:
:host .alert {
background-color: green;
}
which should change the background color to green, but it does not.
The above css code will produce this style:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3] {
background-color: green;
}
and the final HTML looks like this:
<home _nghost-wjn-3="">
<div _ngcontent-wjn-3="" class="card-container">
<alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
<div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
Hello from ng2-bootstrap Sat Sep 17 2016
</div>
</alert>
</div>
</home>
I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:
[_nghost-wjn-3] .alert
instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?
Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).
I'm using the default view encapsulation (emulated) in the home component.
How can I do that please?
I figured it out myself. This is what I was looking for:
:host /deep/ .alert {
background-color: green;
}
The above code will produce the following:
[_nghost-wjn-3] .alert {
background-color: green;
}
This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.
Source: https://angular.io/docs/ts/latest/guide/component-styles.html
You need:
[_nghost-wjn-3] alert[_ngcontent-wjn-3]
Instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
If you go and check your structure, alert tag has the ngcontent... attribute, not his div child with alert class.
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.