For layout purposes I need to place 15px space between the bottom of the scrolled contents and the bottom of the container: div class="scroll-pane".
Styling the container .scroll-pane { padding-bottom:15px; } has no influence on the output. Going into the code of plugin jScrollPane(), it is set: elem.css({'padding':0}); so the padding-value is reset.
Is there any way to set a paddingBottom value for the scrolling container?
A css rule should work too!
.scroll-pane {
padding-bottom:15px!important;
}
In jQuery
$('.scroll-pane').parent().css('padding-bottom', '15px');
Should do the trick
Related
I've been pulling my hair for hours trying to figure out how to restyle the default scrollbar in Svelte. I've tried regular HTML styles, tens of external npm packages, and every source I could find, but none of them worked. How can I restyle the default scrollbar in a Svelte website?
I've tried adding the following code to my stylesheet but to no avail:
main::-webkit-scrollbar {
width: 0.25rem
}
main::-webkit-scrollbar-track {
background: #1e1e24;
}
main::-webkit-scrollbar-thumb {
color: #93CAED
}
Turns out Dai (from the original post's comments) was correct. I shouldn't have applied the styles on my <main> element. However, I didn't have much of a choice because the styles were to be applied to a .svelte file which only had 3 tags - <script, <style, and <main>. Fortunately, I found a way around this.
By prefixing the ::webkit-scrollbar with :root, which automatically applies the styles in the block provided to the whole document.
Please stop pulling out your hair, it won't help. But the following css would surely help you out to customize the scrollbar in Svelte.
For Webkit(ie. Chrome) browsers
:global(.main::-webkit-scrollbar) {
width: 0.25rem
}
:global(.main::-webkit-scrollbar-track) {
background: #1e1e24;
}
:global(.main::-webkit-scrollbar-thumb) {
color: #93CAED
}
For Gecko(ie. Firefox) browsers
:global(.main){
scrollbar-color: #93CAED #1e1e24;
scrollbar-width: 0.25rem;
}
Assuming, "main" is the class name of the Html element where custom style of scrollbar will be applied.
I'm using a sprite image to change the background on hover and click (the .keepImage class is for the click). It all works, but when the background picture changes it scrolls over to the correct position. Is there a way to do it without the scrolling motion?
JS:
<script>
$(document).ready(function(){
$("a.doing").click(function() {
$(this).siblings(".keepImage").removeClass("keepImage");
$(this).addClass("keepImage");
});
});
</script>
CSS:
a.doing {
width: 229px;
height: 202px;
margin-right: 8px;
background: url(http://localhost:8000/img/manifesto/spr_doing.png) 0 0;
}
a.doing:hover, a.doing.keepImage {
background: url(http://localhost:8000/img/manifesto/spr_doing.png) -229px 0;
}
I think, somewhere in your css you have the transition property specified. Usually when you have a transition property specified like this: "transition: all 500ms ease;", the background position will change with a scrolling effect. If you want to prevent this scrolling from happening, then you can either remove the transition property completely, or you can use transition only for the properties you want to animate like - border, color etc.. but not background. If you can somehow provide a link to your page, or give the html mark up and css, it will help. Thanks.
I need to enable vertical scroolbar into my CKEDITOR classic RT control...
So I have used this CSS
.cke_show_borders {
overflow-y: scroll; // vertical scrollbar
overflow-x: scroll; // horizontal scrollbar
}
But don't work..
Anyone have suggest for me?
Use config.removePlugins (docs):
config.removePlugins = 'autogrow';
Alternatively, modify config.plugins (docs) to select only those that you really need.
I put jQGrtid inside jQuery simple model dialog.
z-index of simple dialog is 950 so i changed the z-index of jqGrid edit/add/delete pupups greater that that because otherwise they appearing below simple modal.
.jqmID1 { z-index: 1000 !important; }
.jqmID2 { z-index: 1000 !important; }
.jqmID3 { z-index: 1000 !important; }
All was looking good but than if i click/close "edit" and than click/clase "add" and than back to "edit" jQGrid popup again displaying below simple modal.
Than i find out than each time .jqmIDn increasing the n value for each new opening popup so my fix working only for 3 first popups ant than when value getting increased .jqmID4 .jqmID5 .... in is not working
Is there anything i can do to fix that? should i change jQgrid.js somewhere?
UPDATE:
OK, as a solution to that I've found a way how to change z-index in simple modal instead, so i decrease it like that:
$("#myDiv").modal({
...
zIndex: 800,
...
});
If someone have any another ideas let me know
You can use zIndex property of the Add and Edit Dialog. See this and this answers for details.
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!