i am using swiper.js via CDN...the problem is that in swiper-bundle.min.css CDN file .swiper-button-next, .swiper-button-prev are set to top:50%; like this:-
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
}
I want to set .swiper-button-next, .swiper-button-prev to bottom:11px; i tried doing it in my own css file but CDN's top:50% is overriding it. And i've tried using !important too but nothing happened.
You can select the same class in your project's main css file and do the styling with !important keyword.
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: unset !important;
bottom: 11px;
}
Here is fiddle with a simple example. In this Fiddle, I have included bootstrap CDN and overridden the padding of .container class to demonstrate
Related
NoRowsOverlay / overlayNoRowsTemplate position is out of ag-grid columns or overlapping headers
I found the solution!
I added this in CSS for angular 4 project.
:host >>> .ag-overlay-no-rows-wrapper {
padding-top: 5em;
}
In my case I had to style the ag-overlay class in my global scss styles. I removed the absolute positioning and added some margin for top and bottom:
.ag-overlay {
position: relative;
margin-top: 24px;
margin-bottom: 24px;
}
I am using PrimeNG OverlayPanel to be displayed in dropdown click but I have a problem to move default left arrow to right position. I tried everything that was in my mind but I am out of ideas.
Can you please give me some new idea for resolving this issue?
code example: https://stackblitz.com/edit/primeng-overlaypanel-demo
dropdown arrow image
Your goal is override deeply incapsulated CSS. One of the possible sollution is to add an id to overlay-panel and then ovverride the desired element(in our case this is before and after pseudo-elements of a div with the p-overlay class
html:
<p-overlayPanel #op [showCloseIcon]="true" id='hello'[style]="{width: '450px'}">
css:
:host ::ng-deep #hello .p-overlaypanel::before,
:host ::ng-deep #hello .p-overlaypanel::after
{
left: 80%;
}
left: 80% is for example.
stackblitz
Add this to style.css:
.p-overlaypanel:after, .p-overlaypanel:before{
left: unset !important;
right: 1.25rem !important;
}
Now the arrow is on the right side opposite of initial.
Additional info: avoid using :host ::ng-deep as it is deprecated.. use the style.css file instead!
.mybutton .p-overlaypanel:after, .mybutton .p-overlaypanel:before {
bottom: 100%;
content: " ";
height: 0;
right: 1.25rem; //<---
pointer-events: none;
position: absolute;
width: 0;
}
is the place but the question is;
how you wish to handle button positioning on page. If button near left,right,bottom border then you should handle arrow position. by this variable.
Convert your entire Angular project to Scss. The reason is that View styles do not go deep. Scss in root does go deep and is worth it long term to stop using just CSS in Angular projects. I wrote an article on this.
For p-overlaypanel
:before and :after are the attributes you should catch for this to work
body .p-overlaypanel:before {
left: calc(100% - 17px);
}
body .p-overlaypanel:after {
left: calc(100% - 17px);
}
You can override it in global stylesheet ie style.scss
by wrapping the elements with a custom class. This will provide more specificity.
.your-class {
.p-overlaypanel:before {
left: calc(100% - 17px);
}
.p-overlaypanel:after {
left: calc(100% - 17px);
}
}
This question already has an answer here:
How to add a background image on top of a previous background image?
(1 answer)
Closed 3 years ago.
I know it's possible to have two background images with something like
#example1 {
background-image: url(top.gif), url(bottom.gif);
...
}
But I have one of my images dynamically defined on the element itself with an inline style ="..." tag,
<div class="grid-item grid-item-flagged" id='{{ album.id }}'
style="background-image: url({{ album.photo_thumb.thumbnail.url }})">
</div>
and I'd like to be able to add a class which would add another background-image on top of it.
.grid-item-flagged {
background-image: url("/media/round_outlined_flag_black_48dp.png");
}
The problem is the inline style tag overrides the stylesheet (which I know is by design.)
The only option I can think of is to add them both dynamically inline (which I'd like to avoid.)
I would use a pseudo-element to do that.
#example1 {
position: relative;
/* ... */
}
#example1:before {
content: '\a0';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background: inherit;
background-image: url(bottom.gif);
z-index: 1;
}
you need overwrite the inline style rule, you can use the !important to do this
#example1 {
background-image: url(top.gif), url(bottom.gif) !important;
...
}
you can see the specify order here
And here a image to see it in a better way
I'm using simple-webpack vuecli to implemet my site. I have a button which has an :after modified which produce a contents with background path url. How can I used the require on background-url in css? Seems like inline styling is not working for :after css modified.
Global SCSS
.btn-green .btn-text:after{
content: "";
width: 7px;
height: 10px;
background: url('/assets/img/svg/arrow-right.svg') no-repeat 0 0;
background-size: 100%;
display: inline-block;
margin-left: 5px;
padding-bottom: 11px;
}
Vue Template
<div class="btn-green universal-shadow">
<div class="btn-text">GET STARTED</div>
</div>
You need to use a relative path otherwise Webpack will interpret it as an actual URL instead of a path to a module that it should require.
url('assets/img/svg/arrow-right.svg')
^ removed the leading /
I'm new to HTML5 and I'd like some help adapting this particular code: http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect to be used as a background for a webpage. I've got the snow falling but when I use it as a background, nothing else displays.
You can use z-index with a value of -1 on it:
#myCanvas {
position: fixed; /* or absolute */
z-index: -1; /* put it behind all other elements */
}
Made a JSFiddle to have something to work with. As others stated, position: fixed; and z-index: -1; for the canvas works fine.
This worked for me...
CSS
#myCanvas
{
display: block;
position: absolute;
z-index: -1; //optional.. Depends if you have used z-index for any other element
}
Hope it helps someone...!!
This works for me as well. For future reference to manipulate the z-index you are required to also set the position to absolute or it will not work.
#canvas {
background: #202020;
position: absolute;
z-index: -1;
}