I add the following code to customize my scroll bars, but it is not applied uniformly. In this example the page scroll bar reacts to both color and width but the div scroll bar only reacts to color.
How can I get the div scroll bar to react to the width. I'm in Chrome.
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #ff0000;
}
Related
I have tried this:
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
There is a small white column to the right side of the page, so there is a horizontal scrollbar. I want to see all the contents in a page so that I do not need horizontal scrollbar and I do not need that extra small white column of a page. How can I remove horizontal scrollbar in wordpress with css or what should I do to remove that horizontal scrollbar and that extra small white column?
Add overflow-x: hidden; to your css to hide the horizontal scroll.
I have a navigation bar at the top of the page and I'm trying to get a box shadow to appear underneath it on scroll.
I've tried using .active and :active with no luck. I can force the shadow to appear in chrome devtools but can't get this to work otherwise on scroll.
.sidenav-breadcrumbs {
height: 45px;
font-size: 16px;
font-weight: bold;
background: red;
}
.nav-fixed-top {
position: fixed;
top: 100px;
right: 0;
left: 0;
z-index: 1020;
}
.shadow:active {
box-shadow: 0 0 10px rgba(0,0,0,0.4)!important;
}
Shadow should appear under bar on scroll but seems to only appear when clicking the bar.
Thank you if you can help.
Active selector applies to clicked element, that's why the shadow appears when you click the bar. There is no selector for scroll, so you should be using JavaScript to add the shadow class while scrolling.
document.addEventListener("scroll", function(){
addShadowClassToBar();
});
And since you probably want to remove the shadow after scrolling is finished you should also remove the class. Here is a previous question that deals with detecting scroll stop.
I wanted to hide the nav-bar on a view within tabs(ion-tab)
Have tried top:0 on .tabs also and hide-nav-bar also
Apparently in ion-view if i use hide-nav-bar it leaves space befor the tabs and making it to top:0px (.tabs { top: 0 !important; }) leaves space between content and tabs
see image below
When using hide-nav-bar on ion-view:
With .tabs { top: 0 !important; }:
However , nav bar hides on tabs bottom and there is no space when it on bottom, is there any solution to hide nav-bar without leaving any space
Solved now, wanted to share this
This was because of the .has-tabs-top class that was being added to the ion-content element.
added this along with hide-nav-bar in view and .tabs { top: 0 !important; }
.has-tabs-top {
top: 49px !important; /* height of the tabs */
}
I've tried so many things on this page
https://boycottplus.org/campaign/reclaim-our-time-say-no-time-wasting-websites
On the right column, I can't get a padding or margin of 10px between it and the left column without a scroll bar appearing. I've tried using a wrapper div but everything I do seems to bring the scroll bar :-/
The style I am focusing on
.subsection .inner {
padding-left: 10px;
}
in firefox
Add overflow:hidden to your body style.
Are you setting width and padding on the same element?
For example, if you have:
.subsection .inner {
width: 100%;
padding-left: 10px;
}
then the total width of the inner div will be 100% + 10px, which will result in a scroll bar.
If you want to remove scrollbar in horizontal direction, then use overflow-x: hidden; in that particular HTML element, keeping your vertical scrollbar intact.
My URL: http://www.dreambelle.com/
The background image (white main, grey side bar) that is behind the text and sidebar below the slider is placed too low. You can see this issue to the right of the slider behind the side bar content...
The problem is that I cant figure out how to move the background image up via css without moving the entire body content up?
The background image is rendered from a small bar (attached)
You need to do both (make the #featured_body with a smaller height), and adjust the margin on the #sidebar
Ive tested the following this works for me in FF5:
// Remove 10px from the #featured_body height
#featured_body {
background: url("images/bgr_board.png") repeat scroll 0 0 transparent;
float: left;
height: 356px;
margin: 0 12px;
padding: 0;
width: 618px;
}
// Add 10px to the sidebar top margin
#sidebar {
float: left;
height: auto;
margin: -375px 0 20px;
padding: 0;
width: 332px;
}
This is happening because your div#content, which has the background-image is placed below your div#featured_body, which is pushing it down.
You have two choices, as I see it:
make the div#featured_body smaller height-wise, so that the bg image lines up with the twitter div or
place anther wrapper div around all the content under the nav and add the background-image to that. (That is, if you wanted the bg-img to stretch to the top of the page).