Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I change the indicator? #7

Open
vimcat opened this issue Mar 10, 2015 · 5 comments
Open

How do I change the indicator? #7

vimcat opened this issue Mar 10, 2015 · 5 comments

Comments

@vimcat
Copy link

vimcat commented Mar 10, 2015

screen shot 2015-03-10 at 1 27 11 pm

I was able nzScrollbar-indicator-wrap to look like the attached image but the indicator is not taking the color change and if I force the display to show all the time, it turns the whole wrap black.

@tannerlinsley
Copy link
Collaborator

Let's take a peak at your css?

@vimcat
Copy link
Author

vimcat commented Mar 10, 2015

.scrollContainer {
    overflow: auto;
    margin: auto auto;
    & .nzScrollbar {
        border: 1px solid #E9E9E7;
        .nzScrollbar-indicator-wrap {
            background-color: #ddd;
            opacity: 1;
            width: 10px;
            & .noScroll {
                display: none;
            }
            .nzScrollbar-indicator {
                background-color: blue !important;
                display: block !important;
                height: 20px;
                width: 10px;
            }
        }
    }
    & .noScroll {
        border: 0 none;
    }
}

@tannerlinsley
Copy link
Collaborator

This works to override the colors:

 /* This alters the opacity when you hover over the scrollbox */
.nzScrollbar:hover .nzScrollbar-indicator-wrap {
    opacity: 1;
}
/* This is the background color of the bar */
.nzScrollbar .nzScrollbar-indicator-wrap:hover {
    background-color: rgba(0, 0, 0, 0.2);
}
/* this is the background color of the indicator */
.nzScrollbar {
    .nzScrollbar-indicator-wrap {
        .nzScrollbar-indicator {
            background-color: red !important;
        }
    }
}

Here is a link to the plunkr demo with that css inserted at the bottom: http://codepen.io/anon/pen/NPOGpd

@vimcat
Copy link
Author

vimcat commented Mar 13, 2015

That is almost there. The indicators are different heights. I don't see where that's specified anywhere. Also, how did you get rid of the rounded corners? Thanks!

@tannerlinsley
Copy link
Collaborator

I'm not sure what you mean by different heights, but the css defaults to no
rounded corners on the dragger.
On Fri, Mar 13, 2015 at 10:53 AM Veronica Canterbury <
notifications@github.com> wrote:

That is almost there. The indicators are different heights. I don't see
where that's specified anywhere. Also, how did you get rid of the rounded
corners? Thanks!


Reply to this email directly or view it on GitHub
#7 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants