I am creating a webpage using angular 8 with material design. I am using mat-select to dsiaplay various options. But it shows scrollbar as max-height of mat-select is 256px. I want to hide the scrollbar but enable the scrolling feature. I do not want to increase the height of mat-select-panel.
I have tried the following code but no luck so far.
trial 1::
::ng-deep {
.mat-select-panel-wrap {
overflow: hidden !important;
}
.mat-select-panel {
overflow-y: auto !important;
}
}
trial 2::
::-webkit-scrollbar {
display: none !important;
background: transparent !important;
}
You need to change webkit-scrollbar-track instead of webkit-scrollbar
Try this:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent;
}
Related
I figured out how to hide the scrollbar globally in an Angular app, but I ran into a scenario in my actual project where I need to hide the default scrollbar in a singular Angular component but have the default scrollbar visible in other components. ::host seems to not solve this problem. If anyone knows how to solve this problem, I would greatly appreciate the feedback! Also, if possible, I would love a CSS solution as I feel there shouldn't be any crazy solutions & or hacks to solve this. I made a quick stackblitz below...
https://stackblitz.com/edit/angular-ivy-syr7do?file=src/styles.css
Use this
*::-webkit-scrollbar {
width: 0px !important;
background-color: white !important;
}
*::-webkit-scrollbar-thumb {
width: 0px !important;
background-color: whitesmoke !important;
border-radius: 0px !important;
}
*::-webkit-scrollbar:horizontal {
width: 0px !important;
background-color: white !important;
}
*::-webkit-scrollbar-thumb:horizontal {
width: 0px !important;
background-color: whitesmoke !important;
border-radius: 0px;
}
Replace * with a specific class/id if you want.
Dont forgot to add overflow:auto
Try this:
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Internet explorer and Edge */
.example {
-ms-overflow-style: none;
}
For hiding scrollbar in body globally put
body::-webkit-scrollbar {
display: none;
}
in your CSS file.
And using custom scrollbar in the other component, you just need to wrap in a container your content and set your custom scrollbar.
Here is the a demo.
This works completely fine on desktops:
.container::-webkit-scrollbar {
width: 5px;
}
.container::-webkit-scrollbar-track {
background: none;
}
.container::-webkit-scrollbar-thumb {
background: #f5f5f573;
border-radius: 50px;
visibility: hidden;
}
.container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.container:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
The container is the container for the color buttons. The problem is that it doesn't disappear on mobile devices. Is there a way that I can make the scrollbar disappear when not scrolling down on mobile devices? And then just reappear when I scroll again?
I think that this way will only hide the scrollbar for chrome and some other browsers but might not work with other browsers.
I would recommend looking at this StackOverflow question: Hide scroll bar, but while still being able to scroll
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
I'm trying to hide header and footer on a page when printed from Chrome on Mac. The header and footer does not appear by default via Chrome on Windows. Based on a basic Google, looks like I should set page margin to 0 like this:
#page {
margin:0;
}
Then configure the margin property in #media print body definition like this:
body {
margin:20px;
}
I'm experiencing weird behavior though. Setting the property as above does nothing. Setting the property like this only changes the top margin:
body {
margin: 20px auto !important;
}
I also tried setting each margin explicitly in this way like this:
body {
margin: 20px auto !important;
margin-bottom: 20px auto !important;
margin-left: 20px auto !important;
margin-right: 20px auto !important;
}
However, using this approach also only changes the top margin. Am I correct in setting the #page{margin:0} in order to eliminate the header and footer from the printout? What do I need to do in order to properly set the margins in the body like I'm trying to do in the examples above? Or is there a better way?
The trick to disable specific items from being printed is to explicitly hide those in the #media print css definition.
Here is the css code to hide navbar, footer-section, background and shadows from being printed:
#media print {
.navbar {
display: none;
}
.footer-section {
display: none;
}
* {
text-shadow: none !important;
color: #000 !important;
background: transparent !important;
box-shadow: none !important;
}
}
The above example also sets text colour to black for printing.
Personally, I would suggest just removing them from the display view entirely with a simple media query;
/* Where the magic happens */
#media print {
#header, #footer { display: none !important; }
}
#header {
padding: 1rem;
background-color: #00f;
display: block;
}
main {
background-color: #0f0;
padding: 5rem;
}
#footer {
padding: 1rem;
background-color: #f00;
}
<header id="header">
<h1>Header (will not be in print version)</h1>
</header>
<main>
<p>The main body of stuff whatever it might be...</p>
</main>
<div id="footer">
<strong>Footer (will not be in print version)</strong>
</div>
So I'm working on a website on Divi for WordPress.
I added CSS code allowing me to set a fixed background image on the homepage, however, on tablet and mobile view the image doesn't cover the whole screen, leaving half of the page white. Is there any way I can set the fixed image to be full-screen on mobile too?
here's the code I got:
.select_page {
visibility: hidden;
}
span.mobile_menu_bar:before {
color: rgba(201,144,0,0.78) !important;
}
.et_mobile_menu {
border-top: 3px solid rgba(201,144,0,0.78);
}
/* First we have to make the main header transparent */
#main-header {
background-color: transparent;
}
#main-header,
#main-header.et-fixed-header {
background-color: transparent;
}
/* Then we turn off the footer */
#main-footer {
background-color: transparent !important;
}
/* Here we make the content of our page builder sections transparent. This is so that the background image shows through */
.et_pb_section {
background-color: transparent;
}
/* Here we set the background image for our specific pages. We also set the background image to cover so that it always fills the screen */
.page-id-15 {
background-image: url("https://ardakarakaya.com/wp-content/uploads/2019/12/ARDA1-1.jpg");
background-size: cover;
}
header#main-header.et-fixed-header, #main-header {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
website: ardakarakaya.com
kind regards
Dan
this css need to change:
body.custom-background {
...
background-attachment: fixed;
}
I can't figure out why the following css works in Firefox, Safari but not in Chrome. I am trying to create a top fixed navbar which is centered and have a full width black background bar while keeping the contents of the navbar to display within 1200px max-width. I need to achieve this in a Squarespace template where I can only add custom CSS to an existing template and I don't have access to the page code. So I elected the pseudo insertion approach. All is good except Chrome doesn't want to display it correctly. The site link:
https://mango-lanternfish-lzhh.squarespace.com/
Thank you for your assistance in advance.
Attila
body, #navigator header#topBar {
max-width: 1200px !important;
margin-left: auto; margin-right: auto; }
#navigator header#topBar { background-color: #000000 !important; }
#navigator header#topBar:before {
content: "";
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 85px !important;
background-color: #000000 !important;
}