I have an ASP.Net Web Forms application that has the following CSS defined in a master stylesheet:
::-webkit-scrollbar {
display: none;
}
I'm working on a new page that pops up a modal dialog that will sometimes have vertical overflow. In this case, I need the scrollbar to be displayed for my overflow div. However, I can't find a default display property for ::webkit-scrollbar that resets the scrollbar to its original display state. I tried unset and initial unsuccessfully.
I also tried adding a .scroll class to the div I need the scrollbar to display for, and then changing the master CSS to:
:not(.scroll) ::-webkit-scrollbar {
display: none;
}
But that didn't work either. Can anyone help?
try this
.hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/
display: none;
}
Related
For a sidenav with an embedded iframe, i was getting double scrollbars,
I fixed that using
::ng-deep.mat-drawer-inner-container {
overflow: hidden !important;
}
This is now causing other mat-drawer-inner-container overflows to be hidden too. How can i fix this?
To hide the scrollbar from the side panel you just need to add the below css to your style.scss
.mat-drawer-inner-container::-webkit-scrollbar {
display: none;
}
Please Note: If you use this CSS in the sidebar component then it will not work!
add this to your style.scss without ::ng-depp, so maybe you put this inside some module where you need it.
// Remove scrollbar from mat-sidenav inner container
.mat-drawer-inner-container {
overflow: hidden !important;
}
I want to make the ngx bootstrap datepicker inline instead of it appearing only when you click an input.
ngx datepicker link
Can someone help me achieve this? I've tried to add it in but there is absolute positioning and if I override it with relative positioning it doesn't work properly.
I just want to see this on the page inline without the need of having it inside an input field box:
Thanks
There is a container input in the documentation which says:
container: A selector specifying the element the datepicker should be appended
to. Currently only supports "body".
Any way to get around this?
try this, set the height to 0 with overflow: hidden an leaving it on the page. It'll be there so the picker with position itself correctly but with no height the input will be invisible and still have the picker show up where its supposed to.
And you can set the isOpen property to true so its opened by default
<input bsDatepicker [isOpen]="true" style="height: 0; overflow: hidden; border: none; padding: 0;" />
in you global css style.css file give
bs-datepicker-container {
position: relative !important;
left: 0 !important;
top: 0 !important;
}
!important is required to coz it is having element level style so you need to override it.
Obvious: make toggle disable and show permanently.
How do I make my div’s scrollbar always visible?
.el {
height: 100px;
overflow: scroll;
position: relative;
}
overflow: scroll is not working. It seems my browser’s native behavior does not allow that. (I’m on macOS.)
Is there some workaround?
P.S. The scroll bar is visible on hover, but I need it to always be visible.
It's a browser issue, the browser have there own style for these elements.
If scrollbar go to hidden, it's for the user comfort, you can't change this...
So you can try to make div scrollable with custom scrollbar plugin in jQuery for example :
https://github.com/gromo/jquery.scrollbar
This plugin create fake scrollbars in javascript and permit to user to scroll into element. So browser don't apply his own rules for these scrollbar because they aren't.
You could try
html {
height: 101%;
}
Here is my JSFiddle for full code example.
Notice how you can hover over that orange road glyphicon and it correctly displays my popover? Well, when I shrink the width of the Result section down to the point that the menus stack vertically, and then I hover over the popover, it doesn't render. To me, this means it won't render when a user is viewing my app from a mobile browser.
I tried:
#fieldMode .popover {
min-width: 300px
}
#fieldMode .popover-title {
color: rgb(255,102,0);
background: rgb(176,205,249);
}
#fieldMode .popover-content {
color: rgb(12,66,144)
}
...but that doesn't seem to work. What's the fix?
On mobile, your a tag is given display: block by the bootstrap styles, causing to to be 100% width. This won't work if you're trying to position the popover to the right of it. Adding display: inline-block will cause it to only take up the space it needs instead of the full screen width. Updated fiddle: https://jsfiddle.net/mgup49hv/1/
#fieldModePopover {
display: inline-block;
}
Newbie question here. I have a navigation bar with padding in all of my li's, and I want to be able to target the ahref when you click in the padding. Would this be done with onclick/javascript for each li? or is there a simple CSS method?
Also I have a search bar, that I want to focus by clicking on it's padding as well. I assume this would require a similar method.
First, you must set display:inline-block as a property for your links. Then, remove the padding from your list-item and apply it to the links.
Your CSS should reflect the following:
li a {
display: inline-block;
padding: 10px;
}
Here's a fiddle for a working example.
maybe you could specify:
li.someclass a {
display: inline-block; //or display:block;
width: 100%;
height: 100%;
}
(remember to specify width/height of parent container aswell)
not sure if i got you right though
Set the padding to the anchor instead of to the li.
See http://jsfiddle.net/FBsKH/ and compare.
About the search bar, can you post some code?
If I add padding to a <input type="text" /> and I click it on it's padding, it gets focus (tested on Firefox and Chrome). See it here: http://jsfiddle.net/fnsRu/
Edit:
Ah, now I understand what you want with the search bar.
The problem is that AFAIK with CSS you can't set focus to an element.
Then, you can:
Remove paddings: http://jsfiddle.net/fnsRu/3/
Use JavaScript: http://jsfiddle.net/fnsRu/4/