Develop Reference

iframe scrollbar width size change

[iframe scrollbar width size change](https://i.stack.imgur.com/zyr4y.png)
i tried with this style but not working
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

iframe content does not inherit styles from the parent document. In other words, those styles will only be applied to scrollbars on your page, not the scrollbars of any nested documents (unless those pages have the same styles).
However, if you're embedding a website from the same origin in an iframe, and you want to override its content's styles, then you can do something similar to what's suggested in this answer.

How to reduce the range space of scrollbar to be different from the div height?

I want to resize the space where the scrollbar moves.
I don't want it to affect how much I can scroll.
Look at the following pictures (my drawings) to better understand what I mean.
I'm using chrome so webkit is viable.
Thanks to all of your answers!
(P.S. I would love to have reduce the image size, yet I don't know how to! My apologies!).

Without nesting another element and play with its height you could simply use a huge border-bottom and place a visible border around the element using the outline property, e.g.
div {
width: 200px;
height: 300px;
outline: 1px #9bc solid;
border-bottom: 50px transparent solid;
}
Codepen demo
Result

You can't change the height of the scrollbar but you can redesign the scrollbar with -webkit-scrollbar like this:
::-webkit-scrollbar {
width: 5px;
height: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #808080;
}

change color of sidebar

I'm trying to change the background color of the sidebar of this React app. This is the source code of the sidebar component. I tried removing the data-color attribute of this element
<div
id="sidebar"
className="sidebar"
data-color="black"
data-image={imagine}>
and adding a CSS rule:
#sidebar {
background-color: #0b7c9c !important;
}
But for some reason, the sidebar still has a black background. I'm pretty sure the background color is being set via JavaScript in a manner that overrides all CSS rules, but I can't figure out how/where.

I'm seeing the background color is coming from :before pseudo-element of sidebar class, so you need to use !important to .sidebar:before background.
.sidebar:before, body>.navbar-collapse:before {
opacity: .33;
background: #f00 !important;
}

I think the .sidebar-background might be causing issues.
.sidebar {
background: #0b7c9c !important;
}
.sidebar-background {
display: none;
}

How Would I Make a Custom Scrollbar Apply Only to a Specific DIV Tag

Basically, I'm trying to setup a thinner scroll-bar for a Tumblr blog I need to do. How do I specify which div the scrollbar should effect, because I don't want the custom scrollbar (for the div) to replace the web-browser's default scrollbar (the scrollbar on the far right of your screen)?
Any suggestion? I saw the css for the new scrollbar, but it's all webkit, and without HTML, how do I single out which DIV I want it to affect?

You can style your scroll bar for any specific div as this example. I applied the custom scrollbar to the div with class="scroll"
However custom scrollbar css does not work in firefox. However you can use some custom jquery plugins for that (they may not be as good as the css ones but they do the trick) and here's question about that.
Here's a great article about what different properties and styles you can apply to your custom scrollbar.
Here's a fiddle
.scroll{
background-color:green;
width:100px;
height:200px;
overflow:scroll;
}
.scroll::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar{
width: 10px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb{
background-color: #000000;
border: 2px solid #555555;
}
<div class="scroll">
sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>
</div>

setting height of a div in jquery ui layout

Ive been experimenting with the adjustable grids plugin (jquery ui layout).. I was able to set the width of each divs using the plugins.. bt when it comes to height ive only been allowed to adjust the heights of outer div. I was wondering if it is possible to to adjust the height of inner north div ive added in the jsfiddle link http://jsfiddle.net/J4bJ3/1/
ive tried $("#facetContainer").css({"height":"50%"});
on load time. bt it will not wrk

A lot of those ui elements have settings that need to be overridden in css using !important have you tried eliminating css as the culprit already?
edit
If I change:
.ui-layout-pane-south {
border: 1px solid #BBB;
overflow: hidden;
}
to:
.ui-layout-pane-south {
height: 230px !important;
border: 1px solid #BBB;
overflow: hidden;
}
Resulting in:
And when using an id on an element, implement the rule as follows: